Question

我一直在尝试这个，它仍然说这是错的。它一直说numberOfRounds是未定义的。还有其他方法可以吗？我希望它能够运行用户想要的次数“选择___颜色”。

<html>
<!--This is the start screen that you see to begin the game. You also select how many rounds of the game you would like.-->
<font size="6"><center><strong><p id="startScreen">Welcome to the Random Color Game.</p></strong></center></font>
<font size="4"><center><p id="startScreen2">How many many rounds of the game would you like?</p>
<form id="numberOfRounds"><p id="startScreen3">I would like <input id="numberOfRounds" type="number" min="1" max="20" name="numberOfRounds"> rounds.</p>
<p id="startScreen5">To start playing the game, push begin.</p></center></font>

<center><h4 id="sayColor"></h4></center>


<center><p id="startButton"><button type="button" onclick="startGame();buttonColors();">Begin</button></p></center>
<!--this is the paragraph that will have all the buttons placed inside.-->
<center><p id="game"></p><center>

<script>
	
	var randomNumber = 0;
	var redPressed = false;
	var bluePressed = false;
	var greenPressed = false;
	var purplePressed = false;
	var orangePressed = false;
	var x = 1;

function startGame()
{
	buttonColors();
	//gets rid of the start screen text
	document.getElementById("startScreen").innerHTML = "";
	document.getElementById("startScreen2").innerHTML = "";
	document.getElementById("startScreen3").innerHTML = "";
	document.getElementById("startScreen5").innerHTML = "";
	//makes the text for the game
	document.getElementById("startButton").innerHTML = "<button type='button' onclick='location.reload()'>Restart</button>";
	document.getElementById("game").innerHTML = "<button type='button' onclick='redPressed = true;redCheck();' style='background-color:red'>Red</button><button type='button' onclick='bluePressed = true;blueCheck();' style='background-color:blue'>Blue</button><button type='button' onclick='greenPressed = true;greenCheck();' style='background-color:green'>Green</button><button type='button' onclick='purplePressed = true;purpleCheck();' style='background-color:purple'>Purple</button><button type='button' onclick='orangePressed = true;orangeCheck();' style='background-color:orange'>Orange</button>";
	//checks to see if the function ran
	console.log("startGame() ran.");
	makeRounds();
}

function makeRounds()
{
	//takes the number of rounds and puts it into a variable so it shows the amount of questions you want
	var numberOfRounds = document.getElementById("numberOfRounds").value;
	console.log(numberOfRounds);
	x = numberOfRounds*2;
	console.log(x);
	while (x<=numberOfRounds)
	{
		randomNumber = ( Math.floor(Math.random() * 5));
		console.log(randomNumber);
	}
}

function buttonColors()
{
	if (randomNumber==1)
	{
		document.getElementById("sayColor").innerHTML = "Push the red button."
	}
	if (randomNumber==2)
	{
		document.getElementById("sayColor").innerHTML = "Push the blue button."
	}
	if (randomNumber==3)
	{
		document.getElementById("sayColor").innerHTML = "Push the green button."
	}
	if (randomNumber==4)
	{
		document.getElementById("sayColor").innerHTML = "Push the purple button."
	}
	if (randomNumber==5)
	{
		document.getElementById("sayColor").innerHTML = "Push the orange button."
	}
}

function redCheck()
{
	if (randomNumber==1)
	{
		correct();
	}
	else
	{
		incorrect();
	}
	x--;
}

function blueCheck()
{
	if (randomNumber==2)
	{
		correct();
	}
	else
	{
		incorrect();
	}
	x--;
}

function greenCheck()
{
	if (randomNumber==3)
	{
		correct();
	}
	else
	{
		incorrect();
	}
	x--;
}

function purpleCheck()
{
	if (randomNumber==4)
	{
		correct();
	}
	else
	{
		incorrect();
	}
	x--;
}

function orangeCheck()
{
	if (randomNumber==5)
	{
		correct();
	}
	else
	{
		incorrect();
	}
	x--;
}

function correct()
{
	console.log("DATS RIGHT!!");
	window.alert("Correct!")
}

function incorrect()
{
	console.log("Incorrect.");
	window.alert("Incorrect.");
}

</script>



</html>

Answer 1

<form id="numberOfRounds"><p id="startScreen3">I would like <input id="numberOfRounds" type="number" min="1" max="20" name="numberOfRounds"> rounds.</p>

两者都有相同的id，numberOfRounds。

如何在变量中存储用户输入？

1 个答案: