HTML/JS: Calculating and displaying price

Question

I am trying to calculate the price by having different quantities, conditions, etc. I found a good snippet of code here:

http://jsfiddle.net/Wm6zC/

Still, I am searching for a way to have a label, paragraph or a different similar tag, which will update the price, instead using input="text" method. Something like:

<FORM Name="myform">
  <LABEL>Quantity:</LABEL>
  <SELECT NAME="Item" onChange="calculatePrice()" id="Item">
    <OPTION value="1">1</OPTION>
    <OPTION value="2">2</OPTION>
    <OPTION value="3">3</OPTION>
    <OPTION value="4">4</OPTION>
    <OPTION value="5">5</OPTION>
    <OPTION value="6">6</OPTION>
    <OPTION value="7">7</OPTION>
    <OPTION value="8">8</OPTION>
  </SELECT>
</FORM>

<p> Total Cost: 22.9 </P>

And by selecting a quantity, the price gets updated right away. Any idea how to achieve this?

Look at the JSFiddle you linked to. There is a line that sets the "value" of the `input` to the calculated total. Just change that line so that it changes the [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) of a different kind of element. — Mike Cluck, Aug 10 '16 at 20:58

score 1 · Accepted Answer · edited May 23 '17 at 12:32

If you add an ID to the <p> tag you should be able to access it from javascript on the select's onChange event.

<FORM Name="myform">
    <LABEL>Quantity:</LABEL>
    <SELECT NAME="Item" onChange="calculatePrice()" id="Item" onChange="calculateOnChange">
        <OPTION value="1">1</OPTION>
        <OPTION value="2">2</OPTION>
        <OPTION value="3">3</OPTION>
        <OPTION value="4">4</OPTION>
        <OPTION value="5">5</OPTION>
        <OPTION value="6">6</OPTION>
        <OPTION value="7">7</OPTION>
        <OPTION value="8">8</OPTION>
    </SELECT>
</FORM>

<p id="total"> Total Cost: 22.9 </P>

Javascript:

function calculateOnChange() {
    var cost = 0;
    // logic adding the values together: i.e. item.value * itemqty.value
    document.getElementById("total").innerHTML = "Total Cost: " + cost;
}

EDIT: As was mentioned in the comments for those who are new to javascript who don't know the difference between .value, .innerHTML, and .innerText here's a quick description of them.

.value - is a property on input elements that contain the value of the user's input.

.innerHTML - is a property on layout elements that contains the HTML encoded string of everything between it's opening and closing tag. (yes this means that you can get the string "<LABEL>Quantity:</LABEL><SELECT NAME=\"Item\" onChange=\"calculatePrice()\" id=\"Item\" onChange=\"calculateOnChange\">...</SELECT>" if you were to call it on the form)

.innerText - is a property like innerHTML but it is not encoded with HTML, it's encoded as plain text. This property is discouraged as it isn't a W3C standard.

For better descriptions about these properties and other text properties with HTML elements, see @faraz's answer to this question: Difference between innerText and innerHTML in javascript.

What is the difference between `.value` and `.innerHTML`? Maybe also explain `innerText` vs `innerHTML`. — Script47, Aug 10 '16 at 21:01
form elements ( input ) have a `value` attribute, other presentational elements ( `div`, `span` etc ) have innerHTML — Professor Abronsius, Aug 10 '16 at 21:02
@RamRaider I personally know, but posting possible questions that Patrick could answer which the OP might have as they seem like someone new to `JavaScript` — Script47, Aug 10 '16 at 21:03
@Script47 Thanks for pointing out that these need to be explained: @RamRaider did a good job at simply explaining `.value` and `.innerHTML`. As for the difference with `.innerText` and `.innerHTML` short answer is `.innerHTML` allows HTML encoding in the string, it is also discouraged to use `.innerText`, [@faraz's answer to this post](http://stackoverflow.com/questions/19030742/difference-between-innertext-and-innerhtml-in-javascript) does a really good job at explaining why, (as well as the other properties brought up before and more) — Patrick Barr, Aug 11 '16 at 12:48

HTML/JS: Calculating and displaying price

1 Answers1