utilizing .innerHTML using DOM

Question

I'm trying to do something in my mind that is very simple for some reason i am not getting the desired results? I am new to javascript but experienced with java so I believing i'm not using a correct rule of some sort.

This is a simple function to get the entered values, check to see which radio button was selected, and adding its price(value) to my var input;. This is all working, however my three lines of code, document.getElementById("outar").innerHTML = "Small Pizza";/Medium Pizza/and Large Pizza don't output the string "Small Pizza" to my element id = outar.

Edit1: As i was reviewing this waiting for a reply i noticed that i call document.getElementById("outar").innerHTML twice, once in hopes of displaying the String i give it, and then the next displaying the input. Would this override one another and be the reason why i'm only seeing input displayed? *****

function calculate()
    {
      var input = 0;
      if (document.getElementById("small").checked) 
      {
        alert("yay"); /*testing to see if i made it into the if statements*/
        input += parseInt(document.getElementById("small").value);
        document.getElementById("outar").innerHTML = "Small Pizza";
        document.getElementById("outar").innerHTML = input;
      }
      else if (document.getElementById("med").checked)
      {
        input += parseInt(document.getElementById("med").value);
        document.getElementById("outar").innerHTML = "Medium Pizza";
        document.getElementById("outar").innerHTML = input;
      }
      else if (document.getElementById("large").checked)
      {
        input += parseInt(document.getElementById("large").value);
        document.getElementById("outar").innerHTML = "Large Pizza";
        document.getElementById("outar").innerHTML = input;
      }
      else
      {
        alert("failed");
      }

}

I am trying to output these new strings to my html element with the id outar

<th rowspan="10" id="outp"><h3>Order Details</h3><p id="outar"></p></th>

Answer to edit... Yes. It would overwrite. It will set the innerHTML to whatever input is. — Shaun
– Shaun, Commented Nov 11, 2015 at 2:12
After testing this just now i see that. How would i go about displaying both lines of text? making them both variables instead? — SenjuXo
– SenjuXo, Commented Nov 11, 2015 at 2:13
Together? Concatenate the text like innerHTML = "Large Pizza " + input — Shaun
– Shaun, Commented Nov 11, 2015 at 2:14
ahh i see. I was intending on something like this puu.sh/lh8H7/928456f02c.jpg i think i can achieve it with some breaks and concatenating — SenjuXo
– SenjuXo, Commented Nov 11, 2015 at 2:15
If you'd like to post some sort of answer to my question i would be happy to select it. Thanks again! — SenjuXo
– SenjuXo, Commented Nov 11, 2015 at 2:17

Shaun · Accepted Answer · 2015-11-11 06:10:50Z

I thought I'd refactor your code a little:

function calculate() {
  var small = document.getElementById("small"),
    med = document.getElementById("med"),
    large = document.getElementById("large");

  if (small.checked) {
    alert("yay"); /*testing to see if i made it into the if statements*/
    setOutput("small", "Small Pizza");
  } else if (med.checked) {
    setOutput("large", "Medium Pizza");
  } else if (large.checked) {
    setOutput("large", "Large Pizza");
  } else {
    alert("failed");
  }
}

function setOutput(valueID, productName) {
  var total = document.getElementById(valueID).value || 0,
    outar = document.getElementById("outar");
  outar.innerHTML = productName + " " + total.toString();
}

Infact if you had checkboxes like this:

<input type="checkbox" value="12" onchange="setOuput(this)" label="Small Pizza" />

<input type="checkbox" value="18" onchange="setOuput(this)" label="Medium Pizza" />

<input type="checkbox" value="24" onchange="setOuput(this)" label="Large Pizza" />

You could then avoid all the other code and have just the following setOutput function. Which also adds up a total of checkboxes selected.

function setOutput(chk) {
  var cost = chk.checked ? chk.value : -chk.value,
    totalElement = document.getElementById("total"),
    sum = parseInt(totalElement.innerHTML || 0) + cost;
  totalElement.innerHTML = sum;
 document.getElementById("pname") = chk.label;
}

Change your HTML to:

<th rowspan="10" id="outp"><h3>Order Details</h3><span id="pname"></span><span id="total"></span></th>

Collectives™ on Stack Overflow

utilizing .innerHTML using DOM

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related