HTML javascript not working

Question

I have this html with javascript, but I don't know why it's not working. It's right now supposed to calculate the values of the two textboxes when the button is pressed. However nothing is happening. Code:

<!DOCTYPE html>
<html>
<body>
    <h1>HTML Räpellys 2</h1>
    <select id="mathType">
        <option value="0">Addition</option>
        <option value="1">Subtraction</option>
        <option value="2">Multiplication</option>
        <option value="3">Division</option>
        <option value="4">Shift Left</option>
        <option value="5">Shift Right</option>
        <option value="6">Increment</option>
        <option value="7">Decrement</option>
        <option value="8">AND</option>
        <option value="9">OR</option>
        <option value="A">XOR</option>
    </select>
    <p></p>
    <form>
        Value 1: <input type="text" id="val1" value=""></input>
        <p></p>
        Value 2: <input type="text" id="val2" value=""></input>
    </form>
    <p></p>
    <button onclick="mathFunc">Calculate!</button>
    <p></p>
    <script>
        function mathFunc() {
            var box1 = document.getElementById("val1").value;
            var box2 = document.getElementById("val2").value;

            if (document.getElementById("mathType").value == 0) {
                document.write(box1 + box2);
            }
        }
    </script>
    <noscript>Java is required to display this element!</noscript>
</body>
</html>

edit the <button onclick="mathFunc">Calculate!</button>to <button onclick="mathFunc()">Calculate!</button> — Michel Tomé
– Michel Tomé, Commented Nov 24, 2014 at 12:34
If the code does not display correctly when posting here, please work on making it display correctly. — Geeky Guy
– Geeky Guy, Commented Nov 24, 2014 at 12:34
You also have to parse your values to Integers otherwise your trying to add strings which means 5+2=52. So the following var box1 = parseInt(document.getElementById("val1").value); will nean that 5+3=7 — w3shivers
– w3shivers, Commented Nov 24, 2014 at 12:47

VisioN · Accepted Answer · 2014-11-24 12:34:29Z

1

The issue is that the function should be called on click: onclick="mathFunc()".

Generally, I would recommend you not to use document.write in the code but for debugging purposes use browser console and console.log function.

MDN: https://developer.mozilla.org/en/docs/Debugging_JavaScript#Console.log_in_Browser_Console

answered Nov 24, 2014 at 12:34

VisioN

146k35 gold badges287 silver badges291 bronze badges

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

2 Comments

user4228573 Over a year ago

I got the output value now, but javascript has some weird logic -> 1 + 2 = 12. Shouldn't that be 3?

VisioN Over a year ago

@Baka94 Yes, it should be. value property returns string value, and + will do string concatenation. In order to fix that put + before the value or use parseFloat function: parseFloat(box1) + parseFloat(box2).

dumle · Accepted Answer · 2014-11-24 12:47:22Z

0

the <form> tag should contain the form elements...

eg <form> <select... then I'd also make sure I don't get the string value of the input fields byt wrapping them with parseFloat(). eg:

var box1 = parseFloat( document.getElementById("val1").value ) ;

you also need to call the function as a function, basically what VisioN said above: onclick="mathFunc()"

answered Nov 24, 2014 at 12:47

dumle

694 bronze badges

Collectives™ on Stack Overflow

HTML javascript not working

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related