This is my first post on these forums. I'm trying to create a table that calls its numbers from a VoIP test result on a program that I run in the HTML. currently, im trying to make the result table look "pretty" by if the VoIP Jitter is recorded 1 or above it will change the text color to red and vise versa to green.
function testFinished(vJit) {
voipcolor(vJit);
document.getElementById("aftert").innerHTML='<table class="tableRes" id="tableRes"><style>table {border:1px solid black; margin-left:auto; margin-right:auto;} th, td{border:1px solid black;}</style><thead><thead><tr><th colspan="2">VoIP Test</th></tr></thead><Tr><td>Jitter</td><td>' + vJit + 'ms</td></tr></table>';
}
I have also created the an if statement but for some reason, I keep getting errors for the "unexpected token if":
function voipcolor(vJit)
if (vJit < 1) {
let vJit = '<p style="color:green;">' + vJit + '</p>'
}else if (vJit >= 1) {
let vJit = '<p style="color:red;">' + vJit + '</p>'
}
}
there is more to the table but because i am asking about the colors i figured i would just refrence 2 cells instead of 10 or more.
what is causing the error with the if statement?
what is the proper way to insert the color change?
so I realize I need a return statement and tried adding that to the function also I beleave I edit the else issue that #Taplar was mentioning.
function voipcolor(vJit) {
if (vJit < 1) {
return voipcolor.style.color = "green"
}else{
return voipcolor.style.color = "red";
}
}
but nothing is happening. I believe I need to call the voipcolor(vJit) but im not sure how.
I'm not sure how all your HTML/CSS is defined, but can you make your code look something like this?
if (vJit < 1){
p.style.color = "green";}
if (rating >= 1){
p.style.color = "red";}
Playing with this might help too: https://www.w3schools.com/js/js_htmldom_css.asp
so I ended up asking my mentor/teacher/boss ... thing... person, for some help. I was not calling the function with the if statement. so what I did was called the function from the table replacing + vJit + with function voipcolor(vJit)
then in the voipcolor function instead of return voipcolor.style.color = "green" I used return '<span style="color: green">' + vJit + '</span>'
Because I am calling the function the whole function runs in order. when I use the return statement, the function stops running at the return statement. there are other ways to make this work and explaining this is more for my understanding than anything else. I do hope people will learn from this and understand the innerHTML attribute as I have.
Related
I'm trying to code a rock paper scissors game where when I hit the new game button in the middle of the screen it prompts the user for two name inputs. I've seen this in action before but I can't figure out where I'm going wrong. Hopefully this is enough code to figure it out, otherwise I can post more! Thanks in advance.
$('#gameController').bind('click', function() {
if (game.running === false) {
if ($(this).text() == 'New Game') {
for (i = 1; i < 3; i++) {
do {
var player = prompt('Player ' + i + ', enter your name...');
} while (!player);
$('#player' + i + 'Name').text(player);
game.addPlayer(player);
}
};
I tried executing only the for loop with do...while in jsfiddle. It works fine.
Which means your error has something to do with $('#player' + i + 'Name').text(player); or game.addPlayer(player);
Based on the comments, I suspect an infinite recursion at game.addPlayer(player);. Glad that you found your solution.
You can use alert() e.g. var player = alert('Player ' + i + ', enter your name...');
I have a marquee in a game that i would like to repeat once finished.
var elems = "<br />";
elems += "<marquee id='m1' direction='left' width='800' scrolldelay='5' scrollspeed='true' scrollamount='2' loop='infinite' >";
if (exp >= 0) {
elems += "Galactic News:" + arr0[exp] + "";
}
if (lfLvl >= 0) {
elems += "Planet News: " + arr1[lfLvl] + "";
}
elems += "</marquee>";
when I run app, the variable goes to a part of the page where i want the marquee. It plays through fine. But once it's over, it's does not begin again. It will start again if the user navigates away and comes back.
I would like to know some reason why it isn't repeating, as well as a solution. If i can't do it, i'm not too bothered. It's just a polishing issue that i would like to get out of the way. Thank you to anyone that can help.
Another alternate solution i was thinking of, was to detect when the last item runs, and the marquee has finished, then to throw in a last thing saying something like "end of feed" or something like:
if (marquee === over) {
elems += "End of Feed";
}
but i don't know exactly how to do that over variable, so i kinda had my fingers crossed with attribute
loop='infinite'
try changing your loop to -1 like this:
<marquee id='m1' direction='left' width='800' scrolldelay='5' scrollspeed='true' scrollamount='2' loop='-1' >
I've been messing around with JavaScript samples and ever since I edited this one I can't figure out why it wont work. Everything looks fine to me, but here is the code (JSFiddle)
https://jsfiddle.net/en2a8c1v/1/
function click(e) {
document.body.style.backgroundColor='" + e.target.id + "';
}
document.addEventListener('DOMContentLoaded', function () {
var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', click);
}
});
First, make sure that in the JS settings you have no-wrap enabled (I used no-wrap head) in the load type dropdown.
Next, you need to understand that when you call e.target.id, this is already a string variable. You are literally making the background color "e.target.id". That isn't a color.
Simply change document.body.style.backgroundColor='" + e.target.id + "';
to document.body.style.backgroundColor= e.target.id;
I'm not going to touch on the fact that this is a terrible way to go about this as I am assuming you are just playing with event handling.
Maybe someone will find this usefull. Use CSS attribute: background-color:rgb(x,y,z);
You can do it on simple way, for example:
document.getElementById("elementID").style.backgroundColor = 'rgb('+ this.red + ', ' + this.green + ', ' + this.blue + ')';
These r,g,b values can be, for example:
this.red = 0;
this.green = 255;
this.blue = 130;
I have been trying to find an UNDERSTANDABLE way of creating a JS button but I can't understand parent node child eating and whatnot. I feel so close to perfecting my little game but can't quite get there.
var health=100;
var ehealth=100;
var atk;
var eatk;
function attack(x){
x=Math.floor(Math.random()*11);
atk=x;
ehealth=ehealth-atk
document.write('Enemy Health:' + ' ' + ehealth + ' ')
}
function eattack(x){
x=Math.floor(Math.random()*11);
eatk=x;
health=health-eatk
document.write('Health:' + ' ' + health + '<br/>\n')
}
function dead(){
if(health<=0&&ehealth<=0){
document.write('A Draw');
}else{
if(health<=0){
document.write('You Lose');
}else{
if(ehealth<=0){
document.write('You Win');
}
}
}
}
function battleRound() {
attack(0);
eattack(0);
dead();
if( health>=0&&ehealth>=0 ) {
setTimeout( battleRound, 400 );
}
}
</script>
<button onclick='battleRound()'>Start</button>
<button onclick="document.location.reload(true)">Reset</button>
</body>
I want the reset button to appear after the battle is complete but the whole internet appears to be screaming child node and parent something :(
4th question I've asked today so sorry for my newbie-ish-nes
You could add a style of display: none to the reset button then show it once the battle is complete by using.
element.removeAttribute("style")
So right now I'm trying to program what would essentially be a simple game where the user is given a riddle and when they give the correct answer they are allowed to move on to the next riddle.
Right now i can bring up a prompt that you then answer the question for which leads to more text, and i can hypothetically add a button in ... but then along with the button comes all of the coding surrounding it also?
Is there anyway to fix this? Or is there a better coding alternative for what i'm trying to do? I kind of wish I knew how to use forms instead of prompts and buttons but from what i've tried to find i can't seem to see any way of doing that.
Here's what i've written so far (sorry i haven't posted on this website before, i'm actually just pretty desperate now) (Ps. Im aware that i'm very bad at coding):
<p>Click the button!.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function nextButton()
{{
<button onclick="nextButton()">Next question!</button>
}
var y;
var name=prompt("What are bunnies?");
if (name!="fluffy")
{
y= name + " " + "is" + " " + "wrong!";
document.getElementById("demo").innerHTML=y;
}
else
{
y="correct!";
document.getElementById("demo").innerHTML=y;
}
}
function myFunction()
{
var x;
var name=prompt("what is cute a fluffy and adorable?");
if (name!="a bunny")
{
x= name + " " + "is" + " " + "wrong!";
document.getElementById("demo").innerHTML=x;
}
else
{
x="correct!" + nextButton ;
document.getElementById("demo").innerHTML=x;
}
}
Maybe change your nextButton function to the following:
function nextButton()
{
return "<button onclick='nextButton()'>Next question!</button>";
}
and see if that works.
EDIT: Also change
x="correct!" + nextButton ;
To:
x="correct!" + nextButton() ;
That should fix the script problem.
Good luck!
You could try an on load hide function and then implement an else if statement to if answer a is selected show button else msbox "Please try again" ? Sorry; I'm taking what I've learned from C# and C++ and seeing if it might be helpful for you in Javascript, but I'm not 100% sure it will be. (So if you could let me know that would be great too. :) )