将我的.js文件与.html文件相关联

i do not know what is wrong with my coding, it seem like my .js file does not able to activate in my html file. please help me.

我不知道我的编码有什么问题,看起来我的.js文件无法在我的html文件中激活。请帮我。

can ignore the rest, i just want to activate my Javascript file in the html.

可以忽略其余的,我只是想在html中激活我的Javascript文件。

var num1 = 0;
var num2 = 0;
var sum = 0;

function randomNumber(){
num1 = Math.floor((Math.random() * 10) + 1);
num2 = Math.floor((Math.random() * 10) + 1);
$("#number1").text(num1);
$("#number2").text(num2);
sum =  parseInt(num1) + parseInt(num2);
}

randomNumber();

   $(":button").click(function () {
    var text = $(":text").val();
    if(text == sum)
    {
      alert("Correct");
      randomNumber();
      $(":text").val("");

    }
    else
    {
        alert("Wrong");
        randomNumber();
        $(":text").val("");
    }

});

it cannot link to my html file.

它无法链接到我的html文件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lab Report</title>
<script src="jquery.js"></script>
<script src="myscript1.js"></script>

<style>
body{font-size:40px;
text-align:center;
background-color: #FC6;}
table {margin-top:200px;
background-color:white;}
td { width:150px;}
input {font-size:20px;}
span {font-size:40px;}
#correctScore{
    background-color:green;


}
#wrongScore{
    background-color:red;

}
</style>
</head>

<body>


<table width="800" border="1" align="center">
     <tr>

    <td colspan="6" align="right" id="timer"><span>Timer : 50 <span></td>


  </tr>

<tr>

    <td colspan="6" id="question"><span>Question 1/10<span></td>


  </tr>


    <tr>
    <td><span>Correct<span></td>
    <td  id="correctScore"><span>0<span></td>
    <td><span>Wrong<span></td>
    <td id="wrongScore"><span >0<span></td>
    <td></td>
    <td></td>

  </tr>
  <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>

</body>
</html>

3 个解决方案

#1

I suspect your either getting a 404 and your script is not loading at all, or your script is throwing an exception. The first thing you need to do is make sure all your resources are being downloaded successfully using the dev tools for whatever browser your using.

我怀疑你要么得到404而你的脚本根本没有加载,否则你的脚本会抛出异常。您需要做的第一件事是确保使用开发工具成功下载所有资源,无论您使用何种浏览器。

The next thing you need to do is put your code inside the jquery ready function since your using jquery.

您需要做的下一件事是将代码置于jquery ready函数中,因为您使用的是jquery。

$(function() { 
    //code goes here
});

If its still not working, access the console in your browser dev tools and see what the error is.

如果它仍然无法正常工作,请在浏览器开发工具中访问控制台,看看错误是什么。

#2

There are few glitches.

有一些小故障。

As iamkrillin pointed out, you should run the script after DOM initializes, if you would like to modify DOM elements.

正如iamkrillin所指出的,如果你想修改DOM元素,你应该在DOM初始化之后运行脚本。
Return value of $(":text").val() is string. Even though JavaScript is not strongly type-casted, it is safe to cast string to int var text = parseInt($(":text").val()); when you would like to do number operations.

返回值$(“:text”)。val()是字符串。即使JavaScript没有强类型转换,也可以将字符串转换为int var text = parseInt($(“:text”)。val());什么时候你想做号码操作。

Edited example

Some suggestions

Instead of alert(); you can use console.log(); and check the output in your browser console. More about console.log is here.

而不是alert();你可以使用console.log();并在浏览器控制台中检查输出。有关console.log的更多信息,请访问此处

#3

You should show an example of your directory tree to provide details

您应该显示目录树的示例以提供详细信息

When you use <script src="jquery.js"></script>, for example, you should make sure that the jquery.js file is in the same directory as your file.html

例如,当您使用

like this:

yourApp
.      jquery.js
.      myscript.js
.      index.html

But in any case, do the test:

但无论如何,做测试:

Open your Dev Tools on file.html

在file.html上打开您的开发工具

Go to Network tab

转到“网络”选项卡

Press F5 (reload)

按F5(重新加载)

Verify if jquery.js and myscript.js it's sucessfully downloaded

验证是否已成功下载jquery.js和myscript.js

#1