linking my .js file with .html file

Question

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.

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

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.

<!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>

score 2 · Accepted Answer · answered Feb 25 '15 at 14:42

2

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.

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

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

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

answered Feb 25 '15 at 14:42

iamkrillin

6,798
1
24
51

1

Jay, do the test that `iamkrillin` recommends above (+1). Do this also - reduce your js code to nothing but the document.ready code shown above, and where it says `//code goes here` -- just put an alert test: `alert("it works");` If that test works, then slowly add you code back in, bit by bit, until you find the problem. – cssyphus Feb 25 '15 at 14:49

score 0 · Answer 2 · edited May 23 '17 at 11:43

There are few glitches.

As iamkrillin pointed out, you should run the script after DOM initializes, if you would like to modify DOM elements.
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.

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.

score 0 · Answer 3 · answered Feb 25 '15 at 15:48

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
Go to Network tab
Press F5 (reload)
Verify if jquery.js and myscript.js it's sucessfully downloaded

linking my .js file with .html file

3 Answers3