inner.html / 处理程序
[英]inner.html / handlers
问题描述
as an incoming javascript coder, i'm stuck at a sample exercise...
作为即将到来的 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>
this is supposed to print:这应该打印：
number of guesses is 5 or fewer: "either you know the secret or you got lucky"Or
number of guesses is 5 or more:"you should be able to do better"或number of guesses is 5 or more:"you should be able to do better"Or
number of guesses in 5 tries : "ahah!"或number of guesses in 5 tries : "ahah!"
however it's not printing .../././但是它没有打印.../././
3 个解决方案
解决方案1
1 2017-02-07 02:07:06
Initially there are few syntax errors to correct最初需要纠正的语法错误很少
do {}without while is not valid javascript.do {}没有 while 是无效的 javascript。- start() is never called. start() 永远不会被调用。 I'm guessing you intended to use
window.onload = startor<body onload="start();">我猜你打算使用window.onload = start或<body onload="start();"> - Your script is executed before the HTML elements it is modifying.您的脚本在它正在修改的 HTML 元素之前执行。 If you want to access elements from the DOM you should access them within a function and/or place the script at the bottom of the body tag.如果你想从 DOM 访问元素，你应该在函数中访问它们和/或将脚本放在 body 标签的底部。
-
<script language="JavaScript">is deprecated.<script language="JavaScript">已弃用。 I think you mean<script type="text/javascript">although as that is the default the type is optional.我认为您的意思是<script type="text/javascript">虽然这是默认类型，但类型是可选的。 - The messages variable is never assigned永远不会分配消息变量
- You set text as the value to a number input.您将文本设置为数字输入的值。 I suspect you intended to use
placeholder="guess a number 1- 32".我怀疑您打算使用placeholder="guess a number 1- 32"。 Note that placeholder is actually used to provide a hint about expected input.请注意，占位符实际上用于提供有关预期输入的提示。 Direct instructions should use a label.直接说明应使用标签。 This doesn't affect your javascript but is worth considering all the same.这不会影响您的 javascript，但同样值得考虑。
Additionally myGuess() currently checks if the submitted value is less than the answer or more.此外，myGuess() 当前检查提交的值是否小于或大于答案。 You need to increment a count value and compare against that.您需要增加一个计数值并与之进行比较。
The below example do what you need下面的例子做你需要的
<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>
解决方案2
0 2017-02-07 01:46:31
The code you need is this:你需要的代码是这样的：
<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>
You can test it in this JSFiddle .你可以在这个JSFiddle 中测试它。
The function Myguess() is called when the form is submitted.提交表单时调用函数 Myguess()。 There was no div messages missing in your code, so I added it.您的代码中没有缺少 div 消息，所以我添加了它。 I also added the counter span which shows how many tries the player has had.我还添加了计数器跨度，显示玩家尝试过的次数。 Also the message "guess a number 1-32" is better added as placeholder.此外，最好将消息“猜测一个数字 1-32”添加为占位符。 I hope that was helpful !我希望那有帮助！
解决方案3
0 2017-02-07 01:55:31
<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>
Note: you was using do - while incorrectly (you was messing the while part).注意：您正在使用do - while错误地（您弄乱了while部分）。 Anyway, do - while or any other loop will just loop forever if the answer is not correct because you are not letting the user to re-enter a number.无论如何，如果答案不正确， do - while或任何其他循环将永远循环，因为您不允许用户重新输入数字。 What you need is to check whether the number is correct or not whenevr the user click the button (that parts you had it correct because you used the event listener).您需要的是在用户单击按钮时检查数字是否正确（因为您使用了事件侦听器，所以您的部分正确）。
What your code was doing (or supposed to be doing) is check if a user clicks the button and then loop if his answer was incorrect untill the answer is is correct (which is not going to happen because you never give the user another chance to enter a number again. He will get a chance after the function execution is finished. And because of the loop it will never be finished).您的代码正在做的（或应该做的）是检查用户是否单击按钮，然后循环是否他的答案不正确，直到答案正确为止（这不会发生，因为您永远不会再给用户机会再次输入一个数字。函数执行完成后他将有机会。并且由于循环它永远不会完成）。 It was never going to work because the loop waits for the user to enter another number (a correct one) to exit and the user is waiting for the loop to end to enter another number (see the paradox).它永远不会工作，因为循环等待用户输入另一个数字（正确的数字）退出，而用户正在等待循环结束输入另一个数字（参见悖论）。
What it should do is to wait for the user to enter a number, check that number, prints the message accordingly for that number and then give the user to enter another number.它应该做的是等待用户输入一个数字，检查该数字，相应地打印该数字的消息，然后让用户输入另一个数字。 (It is a loop (cycle) already so why need another loop) （它已经是一个循环（循环）所以为什么需要另一个循环）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.