1

http://jsfiddle.net/sSwvq/3/

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
       }
Improve this question
5
  • 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? Commented Mar 18, 2014 at 6:24
  • 1
    Both of those are pretty basic Javascript operations that should be covered in any tutorial. Commented Mar 18, 2014 at 6:24
  • 1
    please at least attempt the javascript Commented Mar 18, 2014 at 6:25
  • stackoverflow.com/questions/11563638/… Commented Mar 18, 2014 at 6: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 >.< Commented Mar 18, 2014 at 6:29

3 Answers 3

Reset to default
1

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.

Further reading:

  1. .innerHTML
  2. .value
  3. document (Understand it simply as a tree which holds the many elements in the page, like <html>, <body> and everything, which are its branches. )

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!

Improve this answer
5
  • 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! Commented Mar 18, 2014 at 6:41
  • @Soccham I am adding some more explanation. Commented Mar 18, 2014 at 6:43
  • @Soccham Dome. Hope it helps :) Commented Mar 18, 2014 at 6:49
  • 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 Commented Mar 18, 2014 at 7:03
  • @Soccham it should be document.getElementById. See my answer update. Commented Mar 18, 2014 at 7:10
0

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

Improve this answer
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

Improve this answer
4
  • 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. Commented Mar 18, 2014 at 6: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 Commented Mar 18, 2014 at 6: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. Commented Mar 18, 2014 at 6: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. Commented Mar 18, 2014 at 6:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.