[英]inner.html / handlers
作为即将到来的 javascript 编码员,我被困在一个示例练习中......
<script language="JavaScript"> var num1; var messages; var answer = document.getElementById("guess").value; var counter = 0; answer = Math.floor(1 + Math.random() * 32); function start() { var button = document.getElementById("guessButton"); button.addEventListener("click", Myguess, false); }; function Myguess() { num1 = document.getElementById("guess").value; do { if (num1 == answer) { messages.innerHTML = "Ahah!" } if (num1 < answer) { messages.innerHTML = "Either you know the secer or you got lucky!"; } if (num1 > answer) { messages.innerHTML = "you should be able to do better"; } } } </script> <body> <form action="#"> <input id="guessButton" type="button" value="guess"> <input id="inputfield" type="number" value="guess a number 1- 32"> </form> </body>
这应该打印:
number of guesses is 5 or fewer: "either you know the secret or you got lucky"
或number of guesses is 5 or more:"you should be able to do better"
或number of guesses in 5 tries : "ahah!"
但是它没有打印.../././
最初需要纠正的语法错误很少
do {}
没有 while 是无效的 javascript。window.onload = start
或<body onload="start();">
<script language="JavaScript">
已弃用。 我认为您的意思是<script type="text/javascript">
虽然这是默认类型,但类型是可选的。placeholder="guess a number 1- 32"
。 请注意,占位符实际上用于提供有关预期输入的提示。 直接说明应使用标签。 这不会影响您的 javascript,但同样值得考虑。此外,myGuess() 当前检查提交的值是否小于或大于答案。 您需要增加一个计数值并与之进行比较。
下面的例子做你需要的
<form action="#"> <label for="inputfield">guess a number 1-32</label> <input id="guessButton" type="button" value="guess"> <input id="inputfield" type="number"> </form> <p id="messages"></p> <script type="text/javascript"> var num1; var target = 5; var messages = document.getElementById("messages"); var counter = 0; var answer = Math.floor(1 + Math.random() * 32); function start() { var button = document.getElementById("guessButton"); button.addEventListener("click", Myguess, false); }; function Myguess() { num1 = document.getElementById("inputfield").value; if(num1 == answer) { if (counter === target) { messages.innerHTML = "Ahah!" } if (counter < target) { messages.innerHTML = "Either you know the secer or you got lucky!"; } if (counter > target) { messages.innerHTML = "you should be able to do better"; } } else { counter++; messages.innerHTML = "Keep trying"; } } window.onload = start; </script>
你需要的代码是这样的:
<body>
<form id="form">
<input id="guessButton" type="submit" value="guess">
<input id="inputfield" type="number" placeholder="guess a number 1-32">
</form>
<div id="messages"></div>
<span id="counter"></span> tries
</body>
<script language="JavaScript">
document.getElementById('form').onsubmit = function() {
return Myguess();
};
var num1;
var messages = document.getElementById("messages");
var counterDiv = document.getElementById("counter");
counterDiv.innerHTML = 0;
var counter = 0;
answer = Math.floor(1 + Math.random() * 32);
function Myguess() {
num1 = document.getElementById("inputfield").value;
if (num1 == answer) {
messages.innerHTML = "Ahah!"
}
if (num1 < answer) {
messages.innerHTML = "Either you know the secer or you got lucky!";
}
if (num1 > answer) {
messages.innerHTML = "you should be able to do better";
}
counter++;
counterDiv.innerHTML = counter;
return false;
}
</script>
你可以在这个JSFiddle 中测试它。
提交表单时调用函数 Myguess()。 您的代码中没有缺少 div 消息,所以我添加了它。 我还添加了计数器跨度,显示玩家尝试过的次数。 此外,最好将消息“猜测一个数字 1-32”添加为占位符。 我希望那有帮助!
<script language="JavaScript"> var num1; var messages; // should be initialized inside start because at this moment it doen't exist var answer; var counter = 0; answer = Math.floor(1 + Math.random() * 32); window.addEventListener("load", start); // on loading the page call start; function start() { messages = document.getElementById("message"); // this should be something var button = document.getElementById("guessButton"); button.addEventListener("click", Myguess, false); }; function Myguess() { num1 = document.getElementById("inputfield").value; // the id is "inputfield" not "guess" if (num1 == answer) { messages.innerHTML = "Ahah!" } // else if to stop checking again (if is correct but not the best) else if (num1 < answer) { messages.textContent = "Either you know the secer or you got lucky!"; //textContent is better than innerHTML } // same here else if (num1 > answer) { messages.innerHTML = "you should be able to do better"; } } </script> <body> <form action="#"> <input id="guessButton" type="button" value="guess"> <input id="inputfield" type="number" value="guess a number 1- 32"> </form> <div id="message"></div> </body>
注意:您正在使用do
- while
错误地(您弄乱了while
部分)。 无论如何,如果答案不正确, do
- while
或任何其他循环将永远循环,因为您不允许用户重新输入数字。 您需要的是在用户单击按钮时检查数字是否正确(因为您使用了事件侦听器,所以您的部分正确)。
您的代码正在做的(或应该做的)是检查用户是否单击按钮,然后循环是否他的答案不正确,直到答案正确为止(这不会发生,因为您永远不会再给用户机会再次输入一个数字。函数执行完成后他将有机会。并且由于循环它永远不会完成)。 它永远不会工作,因为循环等待用户输入另一个数字(正确的数字)退出,而用户正在等待循环结束输入另一个数字(参见悖论)。
它应该做的是等待用户输入一个数字,检查该数字,相应地打印该数字的消息,然后让用户输入另一个数字。 (它已经是一个循环(循环)所以为什么需要另一个循环)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.