inner.html / handlers
Question
as an incoming javascript coder, i'm stuck at a sample exercise...
<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"Or
number of guesses in 5 tries : "ahah!"
however it's not printing .../././
3 answers
solution1
1 2017-02-07 02:07:06
Initially there are few syntax errors to correct
do {}without while is not valid javascript.- start() is never called. I'm guessing you intended to use
window.onload = startor<body onload="start();"> - Your script is executed before the HTML elements it is modifying. 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.
-
<script language="JavaScript">is deprecated. I think you mean<script type="text/javascript">although as that is the default the type is optional. - 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". 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.
Additionally myGuess() currently checks if the submitted value is less than the answer or more. 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>
solution2
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 .
The function Myguess() is called when the form is submitted. There was no div messages missing in your code, so I added it. 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. I hope that was helpful !
solution3
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). 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. 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)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.