Issues with JS probably connecting with HTML

Code Feedback
1

I’m trying to console log out a variable, just to make sure the connection with theHTML is working, but I keep getting a null:

<html>
    <head>
        <title>Enzo's Calculator</title>
        <link rel="stylesheet" href="calstyle.css">
    </head>
    <body>
<script src="calculation.js"></script>
        </body>
</html>

In JS, named “calculation.js”, I have:

let one = document.getElementById("one");
console.log(one);

There are a few <div> tags in the HTML body that I left out so not to add more needless code.

2

Without seeing your HTML, it’s tricky to see what the problem might be. Do you have a codepen for your code?

3

I don’t have a codepen. Here’s the entire HTML code:

<html>
    <head>
        <title>Enzo's Calculator</title>
        <link rel="stylesheet" href="calstyle.css">
    </head>
    <body>
        <h1>E-Calculator</h1>
        <div id="screen"></div>
        <div class="float-container">
            <div class="float-child">
                <div id="first-row">
                    <button id="one">1</button>
                    <button id="two">2</button>
                    <button id="three">3</button>
                </div>
                <div id="second-row">
                    <button id="four">4</button>
                    <button id="five">5</button>
                    <button id="six">6</button>
                </div>
                <div id="third-row">
                    <button id="seven">7</button>
                    <button id="eight">8</button>
                    <button id="nine">9</button>
                </div>
                <div id="fourth-row">
                    <button id="zero">0</button>
                    <button id="point">.</button>
                    <button id="equals">=</button>
                </div>
            </div>
            <div class="float-child formulas">
                <button id="plus">+</button>
                <button id="minus">-</button>
                <button id="times">x</button>
                <button id="divide">/</button>
            </div>
        </div>
    <script src="calculation.js"></script>
        </body>
</html>

Thank you!

4

The code you posted should be working. It might help if you make a GitHub repo so we can better check it.

5

Ok. Since I’m new in Github, and all this really, I Googled how to create a repo. Here’s the link Calculator/README.md at main · egazzolo/Calculator · GitHub
Again, thank you.

6

Your code works for me. Not sure why you are getting null back from getElementById

What browser are you using?

Do you see any other errors in the browser console?

Try in a browser with no extensions. You can also install Google Chrome Canary and have that as your secondary clean browser for development.

7

I’m using VSC. I just tried with Scrimba and it works fine. Any ideas why it isn’t working on VSC?

8

How are you running it? Did you try just opening the HTML file in the browser?

There is definitely nothing wrong with the code so it must be something else.

Just as an aside, I would suggest using HTML with a DOCTYPE to avoid it running in quirks mode. In VS Code inside the HTML file, you can just type ! and then press the tab key to get the correct HTML boilerplate code.

9

I use Quokka.js: Start on current file:

image
image1600×900 73.6 KB

Am I doing it wrong?

10

I don’t know if this will answer your question, but I do open the HTML in the default browser and that has been working fine, but the issue I’m having is viewing the JS console. What I’m trying to do is view whatever I put inside the console.log parenthesis to make sure I’m not accidentally creating any bugs along the way.
If I type: “console.log(1 + 2)”, it will display the result (3) just fine, but when I try to view the HTML variable line by typing “console.log(one)” after having assigned an HTML ID to a JS variable, it’ll say null.
Perhaps I haven’t installed the right extension? You know how on Scrimba for example you click Run after creating the same code on JS and it’ll display " <button id=“one”"> (please, ignore the second quotation mark, I just typed it so it would display the code)? That’s what I’d like to be able to see. So do I need another extension? Again, thanks for all your help.

11

Quokka is a Node.js repl used to run pure JS. It doesn’t let you use browser APIs which is what getElementById is. For that, you need to emulate a browser-like environment (using JSDOM).

In any case, I wouldn’t suggest using Quokka for that. Just serve the HTML with VS Code using an extension like Live Preview, or Live Server/Five Server.

12

Awesome. Thank you! I’ve installed Live Preview, then, I press Ctrl + Shift + P and type: “Live Preview: Start Server Logging” from the JS file, but I still can’t view the console.log. Would you please tell me what I need to do so I can view it? I wouldn’t want to compare, but is it possible to view it the same way it’s viewed on Scrimba?
Again, thank you!

13

You can use the VS Code debugger in combination with a live server and the Edge DevTools extension if you want it all inside VS Code.

14

I think I’ve got it. Thank you so very, very much! I’ve spent so many hours watching YT videos one after another trying to find the way to get to this and it’s finally done! Again, thank you!! 8D

1 Like
15

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.