Fatal编程技术网
  • javascript/
  • 无法将javascript链接到html文件？

无法将javascript链接到html文件？

javascript html

无法将javascript链接到html文件？,javascript,html,Javascript,Html,所以我有一个我正在尝试做的实验室，我的教授希望它在两个独立的文件中完成。不幸的是，她是我遇到过的最糟糕的CS老师之一，所以我几乎不得不自学一切。通过将所有js代码放在脚本标记中，我可以让代码在一个html文件中工作。我很确定我链接的文件是正确的，但我也不确定。我的html和js文件也位于同一目录中。这是我的密码： Lab7 = 数字正确： 0 js文件： var ops=['+'、'-'、'*']； var timeLeft=30； var timer=document.getElement

所以我有一个我正在尝试做的实验室，我的教授希望它在两个独立的文件中完成。不幸的是，她是我遇到过的最糟糕的CS老师之一，所以我几乎不得不自学一切。通过将所有js代码放在脚本标记中，我可以让代码在一个html文件中工作。我很确定我链接的文件是正确的，但我也不确定。我的html和js文件也位于同一目录中。这是我的密码：


Lab7
=
数字正确：
0
js文件：

var ops=['+'、'-'、'*']；
var timeLeft=30；
var timer=document.getElementById（'timer'）；
var firstNum=document.getElementById（'firstNum'）；
var secondNum=document.getElementById（'secondNum'）；
var op=document.getElementById（'op'）；
var randomOp=ops[Math.floor（Math.random（）*3）]；
var randomFirstNum=Math.floor（Math.random（）*10+1）；
var randomSecondNum=Math.floor（Math.random（）*10+1）；
firstNum.innerHTML=randomFirstNum；
op.innerHTML=randomOp；
secondNum.innerHTML=randomSecondNum；
var timerId=设置间隔（倒计时，1000）；
var currentCorrectAnswers=0；
document.getElementById（'button'）。addEventListener（“单击“，
函数（）{
var answer=document.getElementById（“textbox”）.value；
var numCorrect=document.getElementById（“numCorrect”）；
if（randomOp=='+'）{
if（randomFirstNum+randomSecondNum==答案）{
document.getElementById（“textbox”）.style.backgroundColor=“白色”；
当前正确答案+=1；
randomOp=ops[Math.floor（Math.random（）*3）]；
randomFirstNum=Math.floor（Math.random（）*10+1）；
randomSecondNum=Math.floor（Math.random（）*10+1）；
firstNum.innerHTML=randomFirstNum；
op.innerHTML=randomOp；
secondNum.innerHTML=randomSecondNum；
}否则{
document.getElementById（“textbox”）.style.backgroundColor=“红色”；
}
}else if（randomOp=='-'）{
if（randomFirstNum-randomSecondNum==答案）{
document.getElementById（“textbox”）.style.backgroundColor=“白色”；
当前正确答案+=1；
randomOp=ops[Math.floor（Math.random（）*3）]；
randomFirstNum=Math.floor（Math.random（）*10+1）；
randomSecondNum=Math.floor（Math.random（）*10+1）；
firstNum.innerHTML=randomFirstNum；
op.innerHTML=randomOp；
secondNum.innerHTML=randomSecondNum；
}否则{
document.getElementById（“textbox”）.style.backgroundColor=“红色”；
}
}否则{
if（randomFirstNum*randomSecondNum==答案）{
document.getElementById（“textbox”）.style.backgroundColor=“白色”；
当前正确答案+=1；
randomOp=ops[Math.floor（Math.random（）*3）]；
randomFirstNum=Math.floor（Math.random（）*10+1）；
randomSecondNum=Math.floor（Math.random（）*10+1）；
firstNum.innerHTML=randomFirstNum；
op.innerHTML=randomOp；
secondNum.innerHTML=randomSecondNum；
}否则{
document.getElementById（“textbox”）.style.backgroundColor=“红色”；
}
}
numCorrect.innerHTML=currentCorrectAnswers；
});
document.getElementById（'button2'）。addEventListener（“单击”，
函数（）{
window.location.reload（true）；
});
函数倒计时（）{
if（timeLeft==-1）{
//时间间隔=30；
清除超时（timerId）；
提醒（“您正确回答了”+currentCorrectAnswers+“问题！”）；
}否则{
timer.innerHTML='time left:'+timeLeft+'seconds'；
时间限制--；
}
}
有人能告诉我我做错了什么吗？谢谢

只需将.js文件放在
标记的末尾。错误是，您的js代码试图访问html元素，但尚未呈现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="David Smith">
        <meta name="discription" content="lab7">
        <meta name="keywords" content="lab7">
        <title>Lab7</title>
        <link type="text/css" rel="stylesheet" href="lab7.css"/>
    </head>
<body>



<div> 
<span id="firstNum"></span>
<span id="op"></span>
<span id="secondNum"></span>
<span>=</span>
<span><input class="textbox"id="textbox"type="text"></span>
<span><input id="button" type="submit" name="button" value="enter" onclick="button();"/></span>
<span id="timer"></span>
</div>

<div>
<span>Number correct: </span>
<span id="numCorrect">0</span>
</div>

<div>
<span><input id="button2" type="submit" name="button" value="try again!" onclick="button2();"/></span>
</div>
<script type="text/javascript" src="lab7.js"></script> <!-- and tried linking here -->

</body>
</html>


Lab7
=
数字正确：
0
它现在可以工作了。尝试将其放在javascript文件中的body或add-on-load函数之后，就像Jquery有一个document.ready函数一样

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="David Smith">
        <meta name="discription" content="lab7">
        <meta name="keywords" content="lab7">
        <title>Lab7</title>
        <link type="text/css" rel="stylesheet" href="lab7.css"/>
    </head>
<body>



<div> 
<span id="firstNum"></span>
<span id="op"></span>
<span id="secondNum"></span>
<span>=</span>
<span><input class="textbox"id="textbox"type="text"></span>
<span><input id="button" type="submit" name="button" value="enter" onclick="button();"/></span>
<span id="timer"></span>
</div>

<div>
<span>Number correct: </span>
<span id="numCorrect">0</span>
</div>

<div>
<span><input id="button2" type="submit" name="button" value="try again!" onclick="button2();"/></span>
</div>

</body>
<script type="text/javascript" src="lab7.js"></script>  <!-- Try linking here -->
</html> 


Lab7
=
数字正确：
0
您的
标记位于它所引用的HTML标记之上。这意味着您的javascript试图使用还不存在的HTML标记，因为所有HTML和JS代码都是从上到下加载的。如果将
标记移动到
标记的底部，代码将正常运行：


Lab7
=
数字正确：
0
您可以找到有关此行为的更多信息。

您的代码似乎很好，正在执行。如果持续存在，请检查控制台错误并删除onclick=“button（）；”js代码中没有按钮函数有趣的问题！顺便说一句，您是否检查了调试工具的“网络”选项卡是否加载了文件？创建一个.js文件，将您所有的js代码放在该文件中，并用于将该文件导入html，以获得更清晰的信息link@ShankarSaranSingh这正是我正在做的我在plunkr中检查了您的示例，它工作正常。非常感谢你！非常感谢你！欢迎@Davidsmith！如果我的答案解决了您的问题，请将其标记为“解决”，以便其他人也知道此问题已解决，您和我也获得了一些声誉分数。非常感谢！我投了更高的票。我不知道为什么有人否决了它，它包含了正确的解决方案。。。