inner.html / handlers

时间:2017-02-07 01:17:21

标签: javascript html

作为一个传入的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 个答案:

答案 0 :(得分:1)

最初修正

的语法错误很少
  • do {}没有时间是无效的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()目前检查提交的值是否小于答案或更多。您需要递增计数值并与之进行比较。

以下示例执行您需要的操作

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您需要的代码是:

<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消息,因此我添加了它。我还添加了计数器跨度,显示了玩家尝试了多少次。还有消息&#34;猜数字1-32&#34;最好添加为占位符。我希望这很有用!

答案 2 :(得分:0)

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

注意:您错误地使用了do - while(您弄乱了while部分)。无论如何,如果答案不正确,do - while或任何其他循环将永远循环,因为您不允许用户重新输入数字。您需要的是在用户单击按钮时检查数字是否正确(因为您使用了事件监听器,所以这些部分是正确的。)

你的代码正在做什么(或应该做什么)是检查用户是否点击按钮然后循环,如果他的答案是错误的,直到答案是正确的(这是不会发生的,因为你永远不会给用户再次输入一个数字的另一个机会。他将在函数执行完成后获得一个机会。并且由于循环它将永远不会完成)。它永远不会起作用,因为循环等待用户输入另一个数字(正确的一个)退出,用户正在等待循环结束以输入另一个数字(参见悖论)。

它应该做的是等待用户输入一个号码,检查该号码,根据该号码打印相应的消息,然后让用户输入另一个号码。 (这是一个循环(循环),所以为什么需要另一个循环)