inner.html / 處理程序
[英]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!"
但是它沒有打印.../././
3 個解決方案
解決方案1
1 2017-02-07 02:07:06
最初需要糾正的語法錯誤很少
-
do {}沒有 while 是無效的 javascript。 - start() 永遠不會被調用。 我猜你打算使用
window.onload = start或<body onload="start();"> - 您的腳本在它正在修改的 HTML 元素之前執行。 如果你想從 DOM 訪問元素，你應該在函數中訪問它們和/或將腳本放在 body 標簽的底部。
-
<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>
解決方案2
0 2017-02-07 01:46:31
你需要的代碼是這樣的：
<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”添加為占位符。 我希望那有幫助！
解決方案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>
注意：您正在使用do - while錯誤地（您弄亂了while部分）。 無論如何，如果答案不正確， do - while或任何其他循環將永遠循環，因為您不允許用戶重新輸入數字。 您需要的是在用戶單擊按鈕時檢查數字是否正確（因為您使用了事件偵聽器，所以您的部分正確）。
您的代碼正在做的（或應該做的）是檢查用戶是否單擊按鈕，然后循環是否他的答案不正確，直到答案正確為止（這不會發生，因為您永遠不會再給用戶機會再次輸入一個數字。函數執行完成后他將有機會。並且由於循環它永遠不會完成）。 它永遠不會工作，因為循環等待用戶輸入另一個數字（正確的數字）退出，而用戶正在等待循環結束輸入另一個數字（參見悖論）。
它應該做的是等待用戶輸入一個數字，檢查該數字，相應地打印該數字的消息，然后讓用戶輸入另一個數字。 （它已經是一個循環（循環）所以為什么需要另一個循環）
使用inner.html
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.