CODEWITHSUNDEEP
javascripthtml
SenjuXo
SenjuXo

Reputation: 155

utilizing .innerHTML using DOM

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>

Upvotes: 0

Views: 102

Answers (1)

Shaun
Shaun

Reputation: 927

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>

Upvotes: 1

Related Questions