Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Simple multiple row sum calculator

Posted by: Osku Mar 15 2020, 01:29 AM

Hello. I am new to all programming, and taking some basics course atm.

So here is the problem that I have now:

When the user click the button, it should print the sum of all the boxes.
I am not sure what I've done wrong with this code and a little help would be appreciated!


<!DOCTYPE html>
<html>
<meta charset="UTF-8"/>
<title>Ostorkori 🛒</title>
<body>
<h2>Ostoskori</h2>
Tuote 1: <input id="tuote_1"/>
<br>
Tuote 2: <input id="tuote_2"/>
<br>
Tuote 3: <input id="tuote_3"/>
<br>
Tuote 4: <input id="tuote_4"/>
<br>
Tuote 5: <input id="tuote_5"/>
<br>
Tuote 6: <input id="tuote_6"/>
<br>
<button type="button" onclick="hintaYht();">Yhteensä</button>
<br>
<div id="tulosX">
</div>

<script>
function hintaYht(){
var tuote1 = Number(document.getElementById(tuote_1).value);
var tuote2 = Number(document.getElementById(tuote_2).value);
var tuote3 = Number(document.getElementById(tuote_3).value);
var tuote4 = Number(document.getElementById(tuote_4).value);
var tuote5 = Number(document.getElementById(tuote_5).value);
var tuote6 = Number(document.getElementById(tuote_6).value);

var tulos = tuote1 + tuote2 + tuote3 + tuote4 + tuote5 + tuote6;
var x = document.createElement("tulos");
var t = document.createTextNode("This is a span element.");
x.appendChild(t);
document.body.appendChild(x);

document.getElementById("tulosX").innerHTML = tulos;

}
</script>



</body>
</html>

Posted by: Christian J Mar 15 2020, 04:38 PM

QUOTE
document.getElementById(tuote_1)


The ID value must be quoted:
CODE
document.getElementById('tuote_1')

(unless it's a variable, but that's not the case here).

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)