How can i link the javaScript file?

Question

I'm trying to build a calculator using JavaScript.I tried to display the value '0' in the screen,but it doesn't working.Can i know why is that ?

My js file

const calculator = {
  displayValue: '0';firstOperand: null;waitingForSecondOperand: false;operator: null;
}

function updateDisplay() {
  const display = document.querySelector('.calculator-dipalay');
  display.value = calculator.displayValue;
}

updateDisplay();

my HTML code

</html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="myscript.js"></script>
</head>

<body>

  <div class="calculator">

    <input type="text" class="calculator-dipalay" value="" disabled/>
  </div>
</body>

</html>

Include your script at the end of your body. You are currently trying to access an element ('calculator-dipalay') that has not yet been loaded. — Christoph Herold, Apr 15 '19 at 13:14
add script file after used selector elements or you should learn more about onload events if you are executing code before selectors — Girish, Apr 15 '19 at 13:14
try putting your script tag as the last thing in your body tag. the JS file is probably getting called before your html is finished loading — jtylerm, Apr 15 '19 at 13:14
i guess `document.querySelector('.calculator-dipalay')` is returning an array and afterwards you try to set the value to that array instead of setting it to the items inside it — messerbill, Apr 15 '19 at 13:15
@messerbill — No. `querySelector` returns either an element or null. It never returns an array (nor does it return any kind of array-like object). You are probably confusing it for `querySelectorAll`. — Quentin, Apr 15 '19 at 13:16
Aside from the problem described in the duplicate, you have some basic syntax errors. Open the developer tools in your browser. Look at the console. Read the error messages. — Quentin, Apr 15 '19 at 13:16
@Quentin is right....like always :D https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector — messerbill, Apr 15 '19 at 13:17

Hien Nguyen · Accepted Answer · 2019-04-15T13:46:03.117

2

Replace ; by , for constant and you must move <script src="myscript.js"></script> before </body> tag.

</html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="calculator">
    <input type="text" class="calculator-dipalay" value="" disabled/>
  </div>
  <script src="myscript.js"></script>
</body>
</html>
const calculator={

And update:

    displayValue: '0',
    firstOperand: null, 
    waitingForSecondOperand: false,
    operator: null }

const calculator={ 
displayValue: '0',
firstOperand: null, 
waitingForSecondOperand: false,
operator: null }

function updateDisplay(){ 
const display = document.querySelector('.calculator-dipalay'); 
display.value = calculator.displayValue; 
}

updateDisplay();

<html>
<head>
  <meta charset="UTF-8">
      <link rel="stylesheet"  type="text/css" href="style.css" >
      <script src="myscript.js"></script>
</head>
  <body>

      <div class="calculator">

      <input type="text" class="calculator-dipalay" value="" disabled/>
</div>
</body>
</html>

edited Apr 15 '19 at 13:46

answered Apr 15 '19 at 13:14

Hien Nguyen

24,551
7
52
62

This appears to fix the problem because you're running the code in a snippet on this page, but it doesn't. The real problem (other than the syntax problem you've highlighted) is that the script runs *before* the DOM is ready, so ` document.querySelector('.calculator-dipalay')` returns undefined. – Reinstate Monica Cellio Apr 15 '19 at 13:24
@Archer you are correct, it returns as undefined.how should i solve the issue? – Asha Apr 15 '19 at 13:43
you need move to the before
tag to ensure all tags are loaded
– Hien Nguyen Apr 15 '19 at 13:46
@Archer I updated the answer – Hien Nguyen Apr 15 '19 at 13:50
I replaced it and it works. can i know how it happens? whats is the issue if i placed within head tag? – Asha Apr 15 '19 at 13:50
because html page load tags from top to bottom – Hien Nguyen Apr 15 '19 at 13:51
so we need to place the script tag for JS file at the end of body tag all the time,is it? – Asha Apr 15 '19 at 13:53
1

yes, put script to before end of body tag is a good practice – Hien Nguyen Apr 15 '19 at 13:54
okay thank you so much for the favor – Asha Apr 15 '19 at 13:56

How can i link the javaScript file?

1 Answers1