cannot link javascript to html file?

Question

so I have lab that I am trying to do and my professor wants it to be done in two separate files. Unfortunately she is one of the worst CS teachers I've ever had so I pretty much have to teach myself everything. I was able to get my code to work in one html file by putting all of my js code in script tags. I am pretty sure I am linking the files correctly but then again I am not sure. My html and js file are located in the same directory as well. Here is my code:

<!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" />
  <script type="text/javascript" src="lab7.js"></script> <!-- I tried linking here -->
</head>

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

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

</html>

js file:

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 = setInterval(countdown, 1000);
var currentCorrectAnswers = 0;


document.getElementById('button').addEventListener("click",
  function () {
    var answer = document.getElementById("textbox").value;
    var numCorrect = document.getElementById("numCorrect");


    if (randomOp == '+') {
      if (randomFirstNum + randomSecondNum == answer) {
        document.getElementById("textbox").style.backgroundColor = "white";
        currentCorrectAnswers += 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;
      } else {
        document.getElementById("textbox").style.backgroundColor = "red";
      }
    } else if (randomOp == '-') {
      if (randomFirstNum - randomSecondNum == answer) {
        document.getElementById("textbox").style.backgroundColor = "white";
        currentCorrectAnswers += 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;
      } else {
        document.getElementById("textbox").style.backgroundColor = "red";
      }
    } else {
      if (randomFirstNum * randomSecondNum == answer) {
        document.getElementById("textbox").style.backgroundColor = "white";
        currentCorrectAnswers += 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;
      } else {
        document.getElementById("textbox").style.backgroundColor = "red";
      }
    }
    numCorrect.innerHTML = currentCorrectAnswers;
  });

document.getElementById('button2').addEventListener("click",
  function () {
    window.location.reload(true);
  });


function countdown() {
  if (timeLeft == -1) {
    //timeLeft = 30;
    clearTimeout(timerId);
    alert("you answered " + currentCorrectAnswers + " questions correctly!");
  } else {
    timer.innerHTML = 'time left: ' + timeLeft + ' seconds';
    timeLeft--;
  }
}

Can someone please let me know what I am doing wrong? Thanks!

Your code seems to be fine it is executing well check the console error if persist & also remove the onclick="button();" there is no button function in js code — Rishab
– Rishab, Commented Nov 21, 2019 at 6:55
Interesting question to read ! Btw did you check your network tab of debug tools whether file is loaded or not ? — Tejas
– Tejas, Commented Nov 21, 2019 at 6:55
create a .js file and put ur all js code in that file and use <script type="text/javascript" src="path to your js file"> to import that file in your html, for more clearity follow w3schools.com/tags/tag_script.asp link — Shankar Saran Singh
– Shankar Saran Singh, Commented Nov 21, 2019 at 6:55
I checked you example in plunkr it works fine. plnkr.co/edit/rLmSAyfg5JjZ8VwN7fxe?p=preview — Saima Haji
– Saima Haji, Commented Nov 21, 2019 at 7:10

Titulum · Accepted Answer · 2019-11-21 07:12:54Z

1

You have your <script> tag above the HTML tags that it is referencing. This means that your javascript is trying to use HTML tags that do not exist yet, because all HTML and JS code is loaded from top to bottom. If you move your <script> tag to the bottom of the <body> tag, your code will run fine:

<!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> <!-- I tried linking here -->
</body>

</html>

You can find more information about this behavior here.

edited Nov 21, 2019 at 7:12

answered Nov 21, 2019 at 6:59

Titulum

11.6k13 gold badges54 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David smith Over a year ago

Thank you so much!

Titulum Over a year ago

I upvoted it. I don't know why anyone downvoted it, it contains the correct solution...

Horhi · Accepted Answer · 2019-11-21 06:58:37Z

0

Just put your .js file in the end of the <body> tag. The error was, that your js code was trying to reach html elements, that was not rendered yet.

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

answered Nov 21, 2019 at 6:58

Horhi

751 silver badge9 bronze badges

1 Comment

David smith Over a year ago

Thank you so much!

Front End Coder · Accepted Answer · 2019-11-21 07:09:28Z

0

Its Working Now. Try it placing after body or add on load function in javascript file, Like there is a document.ready function for Jquery

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

edited Nov 21, 2019 at 7:09

answered Nov 21, 2019 at 6:58

Front End Coder

4682 silver badges8 bronze badges

2 Comments

David smith Over a year ago

Thank you so much!

Front End Coder Over a year ago

Welcome @Davidsmith ! If my answer solve your problem mark it as solve so that others also get to know that this problem is resolve and you and me got some reputation points as well.

Collectives™ on Stack Overflow

cannot link javascript to html file?

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related