为什么Javascript不起作用

why Javascript not working?

本文关键字：不起作用 Javascript 为什么      更新时间：2024-04-19

我使用括号创建代码，它确实运行了代码。

不知怎么的，当我在w3school和codepen（odepen.io/pen/？editors=101）网站上测试我的代码时，它运行得很好。

知道吗？

HTML代码（不更改代码）

<table width="400" border="1" align="center">
 <tr>
   <td><div id="number1">1</div></td>
   <td><div>+</div></td>
   <td><div id="number2">2</div></td>
   <td><div>=</div></td>
   <td><input type="text"></input></td>
   <td><input type="button" value="Check"></input></td>
  </tr>
</table>

这是JavaScript代码。如果我在codepen中运行此代码，它会很好地工作。

//random number appear when start game
var number1;
var number2;
number1 = Math.floor((Math.random() * 10) + 1);
number2 = Math.floor((Math.random() * 10) + 1);
document.getElementById("number1").innerHTML=number1;
document.getElementById("number2").innerHTML=number2;
//Answer
var answer = number1 + number2;
//add click handler with check answer
var checkAnswer = document.querySelector('input[type=text]');
var value = checkAnswer.value;
var btn = document.querySelector('input[type=button][value=Check]');

 btn.onclick = function() 
  {
 if (value == answer) 
  {
      alert('You are correct');
   }
 else{
      alert('You are incorrect, the answer was ' + answer);
   }
 document.querySelector('input[type=text]').value = "";               
 document.getElementById('number1').innerHTML = "";
 document.getElementById('number2').innerHTML = ""; 
 number1 = Math.floor((Math.random() * 10) + 1);
 number2 = Math.floor((Math.random() * 10) + 1);
 document.getElementById('number1').innerHTML = number1; 
 document.getElementById('number2').innerHTML = number2;
 answer = number1 + number2

};

CodePen和WC3等网站为您创建脚本标记、doctypes和css链接。它们是为了快速发展而设计的，所以它们省略了这些重复的步骤。但是，您不能简单地复制和粘贴它们的内容，并拥有可用于生产的代码。

HTML文档需要有一个doctype和一个指向.js文件的链接。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <link rel="stylesheet" href="css/foo.css">
        <script src="js/foo.js"></script>
    </head>
    <body>
      your table goes here
    </body>
</html>

为什么要硬使用：

<input type="text"></input>

轻松添加一些id

<input type="text" id="theanswer"></input>

获取值：

var checkAnswer = document.getElementById('theanswer').value;
相关文章：