Why does my code not display the total?

Question

<!DOCTYPE html>
<html>
<body>

<h2>List Totals</h2>

<p>Display myList Total:</p>

<p id="total"></p>

<form action="/action_page.php">
  <select id = "myList">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
      </select>
<p></p>      
<form action="/action_page.php">
  <select id = "myList2">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
      </select>

</form>

<script>
var x = document.getElementById("myList"+"myList2");
document.getElementById("total").innerHTML = x;
</script>

</body>
</html>

Sorry, this is my first attempt at making a HTML/JS form by using two drop-down menus and adding the values for a total. It seems to not let me have a total. What am I doing wrong? Thanks you all!

Looks like you're trying to get element "myListmyList2" rather than getting both elements and adding them. Look at where your parentheses are in your first line of the script. — Kdawg, Jul 16 '17 at 03:18
Also, for getting the value of the selected option, see https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript — Kdawg, Jul 16 '17 at 03:23

score 0 · Answer 1 · answered Jul 16 '17 at 03:20

<form action="/action_page.php">
  <select id = "myList" onchange="recalc()">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
      </select>
<p></p>
<form action="/action_page.php">
  <select id = "myList2" onchange="recalc()">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
      </select>

</form>

<script>
function recalc() {
var x =   parseInt(document.getElementById("myList").value)
        + parseInt(document.getElementById("myList2").value);
    console.log( x , ' x ');
    document.getElementById("total").innerHTML = x;
}

Thank you very much for your help! – Martin H Jul 16 '17 at 11:34 — Martin H, Jul 16 '17 at 11:34

score 0 · Answer 2 · answered Jul 16 '17 at 03:20

First of all, you have not attached any event to your elements.
getElementById expected ID of the element hence your syntax is invalid.
Use ternary-operator or Number to convert string to number as value property returns string hence it would be concatenated not added.

var select1 = document.getElementById("myList");
var select2 = document.getElementById("myList2");

select1.onchange = manipulate;
select2.onchange = manipulate;

function manipulate() {
  document.getElementById("total").innerHTML = +select1.value + +select2.value;
}

<h2>List Totals</h2>
<p>Display myList Total:</p>
<p id="total"></p>
<form action="/action_page.php">
  <select id="myList">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
      </select>
  <p></p>
</form>
<form action="/action_page.php">
  <select id="myList2">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
      </select>
</form>

Thank you very much for your help! – Martin H Jul 16 '17 at 11:33 — Martin H, Jul 16 '17 at 11:33

score 0 · Answer 3 · answered Jul 16 '17 at 05:42

Change this:

var x = document.getElementById("myList"+"myList2");
document.getElementById("total").innerHTML = x;

to this:

var x1 = document.getElementById("myList");
var x2 = document.getElementById("myList2");
var value1 = x1.options[x1.selectedIndex].text;
var value2 = x2.options[x2.selectedIndex].text;
document.getElementById("total").innerHTML = value1 + value2;

And add in HTML tag with id="total". For example, so:

<span id="total"></span>

Thank you very much for your help! – Martin H Jul 16 '17 at 11:34 — Martin H, Jul 16 '17 at 11:34

Why does my code not display the total?

3 Answers3