CODEWITHSUNDEEP
javascriptjqueryhtml
Jay
Jay

Reputation: 3

linking my .js file with .html file

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>

Upvotes: 0

Views: 126

Answers (3)

Alexandre Demelas
Alexandre Demelas

Reputation: 4690

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:

  1. Open your Dev Tools on file.html
  2. Go to Network tab
  3. Press F5 (reload)
  4. Verify if jquery.js and myscript.js it's sucessfully downloaded

Upvotes: 0

Tamilselvan
Tamilselvan

Reputation: 113

There are few glitches.

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

  2. 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.

Upvotes: 0

iamkrillin
iamkrillin

Reputation: 6876

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.

Upvotes: 2

Related Questions