Perform math on dynamically updating JavaScript Value

Question

I have figured out how to update my html dynamically based on the current input of a form. However, I am stumped with how to perform any math on this value (i.e. value*5), and display that result, instead of merely displaying the value in the form.

Here is a live example: https://dl.dropboxusercontent.com/u/14749627/happy2/number.html

Here is my JavaScript:

<script>
window.onload = function() {

var purchase_quantity = document.getElementById('purchase_quantity');
purchase_quantity.onclick = updateNameDisplay;
purchase_quantity.onclick = updateNameDisplay;
purchase_quantity.onclick = updateNameDisplay;
function updateNameDisplay() {
  document.getElementById('nameDisplay').innerHTML = this.value || "1";
 }
};
</script>

Why do you repeat purchase_quantity.onclick = updateNameDisplay;? — Oriol
– Oriol, Commented Aug 20, 2013 at 2:47
Have you tried document.getElementById('nameDisplay').innerHTML = this.value*5 || "1"; ? — Oriol
– Oriol, Commented Aug 20, 2013 at 2:49

Brigand · Accepted Answer · 2013-08-20 02:54:49Z

1

Campari's solution works, but you should convert it to a Number explicitly as a good habit. If you tried to add instead, it wouldn't work as expected. Also, thanks to Oriol for pointing out the other problem.

var purchase_quantity = document.getElementById('purchase_quantity');
purchase_quantity.onclick = updateNameDisplay;

function updateNameDisplay() {
    document.getElementById('nameDisplay').innerHTML = 
        this.value.length ? Number(this.value) * 5 : "1";
}

demo

answered Aug 20, 2013 at 2:54

Brigand

86.4k20 gold badges167 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oriol · Accepted Answer · 2013-08-20 02:55:49Z

1

Ah, now I see the problem. The obvious solution

document.getElementById('nameDisplay').innerHTML = this.value*5 || "1";

doesn't work because if this.value is "0", then "0"*5 is 0, which is falsy, so "1" is returned instead.

Then, you can use something like

document.getElementById('nameDisplay').innerHTML = (this.value || "1") * 5;

or

document.getElementById('nameDisplay').innerHTML = this.value ? this.value*5 : "1";

depending on what you want.

answered Aug 20, 2013 at 2:55

Oriol

291k71 gold badges459 silver badges535 bronze badges

Comments

federicot · Accepted Answer · 2013-08-20 02:49:50Z

0

To get your value x 5? Pretty simple:

document.getElementById('nameDisplay').innerHTML = this.value * 5 || "1";
                                                   ^^^^^^^^^^^^^^

Check out this fiddle.

answered Aug 20, 2013 at 2:49

federicot

12.3k19 gold badges71 silver badges111 bronze badges

Comments

Joshua · Accepted Answer · 2013-08-20 02:54:29Z

0

If I get what you are saying correctly, then you want to store the elements data as a variable.

var result = this.value * 5; document.getElementById('nameDisplay').innerHTML = result;

If I misinterpreted your question please correct me.

answered Aug 20, 2013 at 2:54

Joshua

111 silver badge4 bronze badges

1 Comment

Joshua Over a year ago

Or you could do it simply like @Campari suggested. Id vote you up but I don't have reputation enough, just joined.

Collectives™ on Stack Overflow

Perform math on dynamically updating JavaScript Value

4 Answers 4

demo

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related