Javascript second prompt is not showing as expected - javascript

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...');

Related

JavaScript if statement changing text color

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.

Marquee loop not infinite

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' >

Trying to bring up new button whenever prompt is answered correctly

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. :) )

Javascript loop to update image is returning broken image

I am new to javascript and am trying to create this loop to simulate some dice rolls. When I click roll none of the images are refreshed and it ends with the broken image shown. Can anyone see where my error is?
function roll(){
for(x=0;x<10;x++){
var die_num1 = Math.ceil(Math.random()*6);
for(y=0;y<20;y++){
var picturetype1 = Math.ceil(Math.random()*3);
if (picturetype1 == 1){prefix1 = "die-";}
if (picturetype1 == 2){prefix1 = "dicet-";}
if (picturetype1 == 3){prefix1 = "dices-";}
document.getElementById("dice").src='http://localhost/CodeIgniter_2.1.2/dice/' + prefix1 + die_num1 + '.gif';
}
}
}
body:
<input type ="button" value = "Roll" onclick="roll()" >
<img name="dice" id="dice" src="http://localhost/CodeIgniter_2.1.2/dice/die-1.gif" >
I used adocument.write to make sure that at least the final image existed in my folder and it does. I would expect to see the images cycling through as the loop progresses though. Again, I have no experience with javascript and have put this together based on how I thought it should look. Any help will be appreciated.enter code here
I wouldn't expect browser as an event-driven environment even to consider updating the screen before you return from you roll(). You need to get acquainted with setTimeout and handle it as a sequence of timer events.
Thanks for setting me in the right direction. I have reworked this to use setTimeout as Michael suggested and it is working great. Only needed 1/10 of a second per iteration, not much but made all the difference.
function roll2(){
var timer = setTimeout ("roll2();", 100);
i++;
if(i >= 15) clearTimeout(timer);
var die_num1 = Math.ceil(Math.random()*6);
var picturetype1 = Math.ceil(Math.random()*3);
if (picturetype1 == 1){prefix1 = "die-";}
if (picturetype1 == 2){prefix1 = "dicet-";}
if (picturetype1 == 3){prefix1 = "dices-";}
if (i <=15) {
document.getElementById("dice").src='http://localhost/CodeIgniter_2.1.2/dice/' + prefix1 + die_num1 + '.gif';
}
if (i >=15) {
document.getElementById("dice").src='http://localhost/CodeIgniter_2.1.2/dice/die-' + die_num1 + '.gif';
i=0;
}
}

jQuery - removing an alert stop code from working

The code below works, but there is an issue with it.
That issue is that unless the alert(this.href); - (about line 11) is in the code the following function does not work.
//There are pages which make up 2 chapters in this content
//We shall attempt to grab all the links from these pages
var c;
var chapters = new Array();
chapters[0] = "original/html/0/ID0EFJAE.html";
//Loop through each page of links
$.each(chapters, function(key, value) {
$("#theContent").append("<div class='chapterindex" + key + "'>working</div>");
$(".chapterindex" + key).load(value + " .content");
alert(this.href);
$(".chapterindex" + key + " div.link a").each(function(intIndex) {
alert(".chapterindex" + key);
});
});
If I take the first alert out of line 11 then the last alert doesn't fire. What am I doing wrong?
The delay that the alert is causing is allowing the data in your load call to load. I suspect that when you remove the alert the data does not load in time.
Try using a callback with your load call, something like (code not tested) -
$(".chapterindex" + key).load(value + " .content",function () {
$(".chapterindex" + key + " div.link a").each(function(intIndex) {
alert(".chapterindex" + key);
});
});
The first alert is probably giving the load function enough time to finish so when you take it out the load function is not done when its trying to fire your second alert.

Categories

Resources