How to have javascript code on a different file then html?

Question

I am constructing a calculator and this is my html for the calculator HTML

      <div id=”calculator”>
        <input type="text" name="display" id="display" disabled>
        <div class="first-row">
          <input type="button" name="operator" value="+" action="add">
          <input type="button" name="operator" value="-" action="subtract">
          <input type="button" name="operator" value="*" action="multiple">
          <input type="button" name="operator" value="/" action="divide">
        </div>
        <div class="second-row">
          <input type="button" class="number" value="7">
          <input type="button" class="number" value="8">
          <input type="button" class="number" value="9">
        </div>
        <div class="third-row">
          <input type="button" class="number" value="4">
          <input type="button" class="number" value="5">
          <input type="button" class="number" value="6">
        </div>
        <div class="fourth-row">
          <input type="button" class="number" value="1">
          <input type="button" class="number" value="2">
          <input type="button" class="number" value="3">
        </div>
        <div class="fifth-row">
          <input type="button" class="number" value="0" onclick="numberPress('0')">
          <input type="button" class="operator" value="=">
        </div>
      </div>

     <script type="text/javascript" src="../javascript/calculator.js"></script>

So in my javascript code, it checks if the button clicked is a operator, then if it is, then it prints out "operator" in the console.

Javascript

    const calculator = document.getElementById("calculator")
    calculator.addEventListener("click", e => {
        if (e.target.matches("input")) {
            key = e.target
            name = e.target.name
            if(name == "operator") {
                console.log("operator")     
            }
        }
    })

The problem is that for the first line, it does not find the calculator id and it stores null in calculator. So, I tried putting the javascript in the same file, but still it does not work. Any help will be very appreciated

Stephen P · Accepted Answer · 2020-03-24 01:05:59Z

3

You are not using this character "

You are using this character ”

So you are writing ”calculator” instead of "calculator" in your HTML

You must use plain quote marks in HTML

edited Mar 24, 2020 at 1:05

Stephen P

14.9k2 gold badges50 silver badges71 bronze badges

answered Mar 24, 2020 at 0:58

edu

1531 silver badge7 bronze badges

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

4 Comments

Stephen P Over a year ago

@YLim - Describe "it doesn't work" which doesn't tell us anything. I took your HTML and Javascript from your question, but then in a .html and a .js file, then I fixed your quote marks just like "edu" said here — and it worked. I click any of the "operator" buttons and it prints to the console.

edu Over a year ago

You're welcome! I created a JSFiddle here: jsfiddle.net/hgz9pe7b/3 where the value of document.getElementById("calculator") is printed to a div below the calculator (since it's an object you won't see much, but it's not null)

YLim Over a year ago

@StephenP it says that "TypeError: calculator is null" when I run the html. Also, when I ran the code in CodePen, it worked too. But, when I ran in sublime, it did not giving me a error.

Stephen P Over a year ago

@YLim — once again … check the quote marks that you are using. In your question your <div id=”calculator”> is using the Unicode right double quotation mark character 0x201D (using the right quote on both the right and left) — In HTML you must use the plain quote marks " Unicode quotation mark character 0x0022 which is what you are using everywhere else. <div class="first-row"> is using the plain quote. type="button" uses the plain quote. It is only on id=”calculator” that you're using the wrong quote marks, and that prevents your getElementById from working.

Collectives™ on Stack Overflow

How to have javascript code on a different file then html?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related