Take an input in HTML and using javascript, process it and send the new variable back to html

Question

So I'm working on a project where I'm inputting a quantity and I want it to calculate the totalcost of the item based on the input quantity and a pre-defined cost. Then after calculating the total cost it would send that back to the HTML document. Ideally it would be dynamic.

Here's a jsfiddle with a psuedo-code. I can't seem to figure it out but I believe that it would be done with DOM which I'm really new too.

Any help would be appreciated! I'm working on something a bit more complex, but I feel that if I can see a more basic example then I can figure out what doesn't want to click for me and I can move forward. I'll keep researching and reading, let me know if I haven't included enough information!

Rough HTML

    <form>
    <input id="quantity" class="qty" type="text" placeholder="quantity" />
    </form>

    <!--display total cost here--> 
    <span>The Cost is: totalcost</span>

Rough Javascript

       var cost = 25;

       function(updater) {
          var quantity = document.getElementById('quantity').value();
          var totalcost = (cost * quantity);

          send total back to html document and display as total cost
       }

What specific part of this are you having trouble with? Getting the value from an input field, or updating the DOM with the result of the calculation? — Barmar, Mar 18 '14 at 06:24
Both of those are pretty basic Javascript operations that should be covered in any tutorial. — Barmar, Mar 18 '14 at 06:24
http://stackoverflow.com/questions/11563638/javascript-get-input-text-value — sabithpocker, Mar 18 '14 at 06:27
my biggest trouble is properly calling the input value and then sending it back to the html page. I'll throw my attempted Javascript on the page with an update edit: sabithpocker that's perfect for part of what I needed! Thank you and that your search abilities are greater than mine >. — JacobW, Mar 18 '14 at 06:29

Gaurang Tandon · Accepted Answer · 2014-03-18T07:10:16.977

Demo

Javascript:

var cost = 25;
// declaring these globally below helps in further use
var input = document.getElementsByTagName("input")[0],
    span = document.getElementsByTagName("span")[0];

function update(value) {
    var totalcost = (cost * value); // you had redeclared `cost` here in local scope
    span.innerHTML = totalcost; // set value of `totalcost` to `span` using `.innerHTML` property
}

input.oninput =  function(){                // when something in input
    var val = parseFloat(input.value, 10); // get the value from `input` 
    update(val); // update the value of `span`
};

Ask if you need help understanding anything here.

This will give feedback as soon as user presses any key, and thus is very fast.

Update1:

document.getElementsByTagName returns a HTMLCollection (similar to an array) containing the set of matched elements (which we had passed as "input" and "span"). What I am doing with [0] is selecting the first element from the HTMLCollection (array), since I know there is only one element each of form, input, span on the page.

.oninput is an event that fires whenever a user presses a key inside of a text box. So, using it, I mean to say, oninput on the input element, fire the function, which will get the input's value using input.value and then parse it in base 10 and send to the update function.

In the update function, we compute the totalcost using the global cost and the argument value. Then using innerHTML, we set the text of span to the totalcost.

Update2:

Remember, there can be many elements by the same name on the same page. Thus the method is rightly called document.getElementsByTagName, i.e., get multiple elements. However, only one element can exist on the page having a particular ID. Hence the method for getting by IDs is called document.getElement(no s here)ById. Easy to remember now :)

Hope that helps!

is the input.oninput what gives the feedback as soon as a key is pressed? Also does the document.getElementsByTagName send and receive values? I think this is whats confusing me the most in terms of understanding the DOM javascript. Thank you so much for the response! I understand so much more from reading around these forums but sometimes it goes over my head in terms of basics! — JacobW, Mar 18 '14 at 06:41
http://jsfiddle.net/sSwvq/23/ One last question if you can! I tried to modify the code there to accept IDs, but it seems to be breaking the functions — JacobW, Mar 18 '14 at 07:03
@Soccham it should be `document.getElementById`. See my answer update. — Gaurang Tandon, Mar 18 '14 at 07:10

score 0 · Answer 2 · answered Mar 18 '14 at 06:31

If you only looking for reading input value and updated span .. then its very simple..

 function update() {
    var cost = 25;
     var quantity = document.getElementById("quantity").value;
      var totalcost = (cost * parseInt(quantity));

      document.getElementById("ans").innerHTML = "The Cost is:" + totalcost;

    // send total back to html document and display as total cost

  }

DEMO

score 0 · Answer 3 · answered Mar 18 '14 at 06:32

0

HTML:

<form>
<input id="quantity" class="qty" type="text" placeholder="quantity" />
    <br>
    <input type="button" value="Calculate" id="calc"/>
</form>

<!--display total cost here--> 
<span>The Cost is: <span id="total">totalcost</span></span>

JS:

document.getElementById('calc').addEventListener('click', updater);

function updater () {
    var cost = 25;
    var quantity = document.getElementById('quantity').value;
    var totalcost = (cost * quantity);

    document.getElementById('total').innerText = totalcost;
}

DEMO

answered Mar 18 '14 at 06:32

Barmar

741,623
53
500
612

This is perfect, if you don't mind me asking what makes the line * document.getElementById('total').innerText = totalcost; * send back to the html document? Since the getElementById seems to receive and send inputs I think this is a big thing that was confusing me. – JacobW Mar 18 '14 at 06:35
`document` is a tree like data structure that holds the whole html page. This data structure is accessible from Javascript. So when you do above command it will get the element with `id` as `total` and sets its `innerText` or its text as `totalcost`. Browser uses this same datastructure to show you the page, so as you change in the datastructure aka `DOM` you gets it reflected in your page. Oviously you should read some tutorials on `DOM` and `JS` as @Barmar suggested – sabithpocker Mar 18 '14 at 06:40
You really need to hit the books and get a basic understanding of Javascript and the DOM. `getElementById` just finds an HTML element, it doesn't send or receive anything. `.value` accesses the value of an input element, and `.innerText` and `.innerHTML` access the contents of normal HTML elements. – Barmar Mar 18 '14 at 06:40
Yes I do need to! Javascript is the language I've used the least and I couldn't get this model type through my thick skull. Thank you both so much for the responses! I've understood the use of this more in the 15 minutes this post has been up than the hour and a half I spent trying to interpret w3c's tutorial. – JacobW Mar 18 '14 at 06:47

Take an input in HTML and using javascript, process it and send the new variable back to html

3 Answers3

Demo

Update1:

Update2: