Beginner: So what am I doing wrong in the following code? (Something with hoisting??)

Question

This is for now a very basic calculator, but it won't work, as the title says, something to do with hoisting and declaring the "var a"?

<!DOCTYPE html>
    <head>
        <title>Functions exc. 8</title>
    </head>
    <body>
        
        Input monthly salary: <input type="text" placeholder="invoer" id="value1"><br>
        <button type="button" onclick="calc">Calculate yearly salary</button> <br>
        Output yearly salary:<div id="jaarsalaris"></div>

        <script>
        //calculate the yearly salary
        function calc() {
            var a = document.getElementById("value1").value;
            var calculateMonth = a * 12;
            document.getElementById("jaarsalaris").value= calculateMonth;// + berekeningVktgeld;
        }
        
        </script>
    </body>
</html>

T.J. Crowder · Answer 1 · 2020-07-24T10:22:46.217

There are two problems (and a couple of other things you probably want to change), but they're not hoisting:

You're not calling your function. onclick="calc" => onclick="calc()". Or better yet, use modern event handling (more below).
div elements don't have a value property. You probably want to assign to textContent.

Also:

Although a * 12 will work, because of implicit conversion from string to number, I always recommend explicitly converting from string to number. (a is a string because you got the value from the value property of an input, which is always a string.) You have lots of options; I'll use parseFloat below.
You've left out the opening <html> tag. Technically, it's optional if you have a <head> tag, but I suspect you left it out because you thought the <!doctype html> was the start tag. It isn't, they're separate things (<!doctype html> is the doctype preamble).

Here's an example using modern event handling rather than onxyz-attribute event handlers. That lets you keep calc from being global. The global namespace is really crowded and it's easy to have hard-to-diagnose conflicts:

<!DOCTYPE html>
<html>
    <head>
        <title>Functions exc. 8</title>
    </head>
    <body>
        
        Input monthly salary: <input type="text" placeholder="invoer" id="value1"><br>
        <button id="btn-calc" type="button">Calculate yearly salary</button> <br>
        Output yearly salary:<div id="jaarsalaris"></div>

        <script>
        // This is a "scoping function"
        (function() {
            document.getElementById("btn-calc").addEventListener("click", calc);
            //calculate the yearly salary
            function calc() {
                var a = parseFloat(document.getElementById("value1").value);
                var calculateMonth = a * 12;
                document.getElementById("jaarsalaris").textContent =  calculateMonth;// + berekeningVktgeld;
            }
        })();
        </script>
    </body>
</html>

Or if your environment supports them (most do these days), use a module:

<!DOCTYPE html>
<html>
    <head>
        <title>Functions exc. 8</title>
    </head>
    <body>
        
        Input monthly salary: <input type="text" placeholder="invoer" id="value1"><br>
        <button id="btn-calc" type="button">Calculate yearly salary</button> <br>
        Output yearly salary:<div id="jaarsalaris"></div>

        <script type="module">
        document.getElementById("btn-calc").addEventListener("click", calc);
        //calculate the yearly salary
        function calc() {
            var a = parseFloat(document.getElementById("value1").value);
            var calculateMonth = a * 12;
            document.getElementById("jaarsalaris").value= calculateMonth;// + berekeningVktgeld;
        }
        </script>
    </body>
</html>

Code at the top level of a module is not at global scope (it's at module scope, which is accessible only to code within the module; code outside the module can't use what's declared within a module unless it's exported).

@SMAKSS - Well-spotted. I'll fix that. – T.J. Crowder Jul 24 '20 at 10:12 — T.J. Crowder, Jul 24 '20 at 10:12

score 0 · Answer 2 · answered Jul 24 '20 at 10:11

Hi please refer the below fixed code

<!DOCTYPE html>
<head>
    <title>Functions exc. 8</title>
</head>
<body>
    
    Input monthly salary: <input type="text" placeholder="invoer" id="value1"><br>
    <button type="button" onclick="calc()">Calculate yearly salary</button> <br>
    Output yearly salary:<div id="jaarsalaris"></div>

    <script>
    //calculate the yearly salary
    function calc() {
        var a = document.getElementById("value1").value;
        var calculateMonth = a * 12;
        document.getElementById("jaarsalaris").innerHTML= calculateMonth;
    }
    
    </script>
</body>
</html>

The mistakes were onclick was not configures properly and since the output has a div it does not have a value property so you need to access the innerHTML property.

Let me know if you have any further questions.

Thank you! What if I wanted to change the output from the div to an input textbox? I changed it to this: . So far that doesn't work. — Arjan van der Laan, Jul 24 '20 at 11:27
If you use input you can set the value property rather than innerHTML — Yash.S.Narang, Jul 24 '20 at 12:55

score 0 · Answer 3 · answered Jul 24 '20 at 10:15

<!DOCTYPE html>
<head>
    <title>Functions exc. 8</title>
</head>
<body>
    
    Input monthly salary: <input type="text" placeholder="invoer" id="value1"><br>
    <button type="button" onclick="calc()">Calculate yearly salary</button> <br>
    Output yearly salary:<div id="jaarsalaris"></div>

    <script>
    //calculate the yearly salary
    function calc() {

        var a = document.getElementById("value1").value;
        var calculateMonth = a * 12;
        document.getElementById("jaarsalaris").innerHTML = calculateMonth;// + berekeningVktgeld;
    }
    
    </script>
</body>

Here you need to specific .innerHTML and it will work

Beginner: So what am I doing wrong in the following code? (Something with hoisting??)

3 Answers3