function in JavaScript

Question

I'm learning basics of JS and I wrote this script but it doesn't work as I aspected. It should add or subtract 10 value inside tag and inside tag value atribute depending on button click.

<!DOCTYPE HTML>
<html>
<head>
<title>Meter</title>
<script type="text/javascript">
function f(a)
{
    document.getElementById("prog").value = document.getElementById("prog").value + a;
    var t = parseInt(document.getElementById("prog"),10);
    document.getElementById("prog") = t + a;
}
</script>
</head>
<body>
<form title="Meter">
<button type="button" onClick="f(-10);" >Subtract</button>
<button type="button" onClick="f(10);" >Add</button>
<meter  min="0" max="100" value="50" id="prog">50</meter>
</form>
</body>
</html>

Well in Google Chrome i get kind of progress bar that works fine but in Firefox an IE I get only text display of inerr tag value as asspected but function doesn't work as aspected it should change that text inside meter tag. — Miro
– Miro, Commented Jun 19, 2011 at 23:45

Dogbert · Accepted Answer · 2011-06-19 23:47:26Z

1

You need to get/set .innerHTML of the element.

function f(a)
{
    document.getElementById("prog").value = document.getElementById("prog").value + a;
    var t = parseInt(document.getElementById("prog").innerHTML, 10);
    document.getElementById("prog").innerHTML = t + a;
}

answered Jun 19, 2011 at 23:47

Dogbert

224k43 gold badges419 silver badges416 bronze badges

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

Comments

JiminP · Accepted Answer · 2011-06-19 23:47:46Z

First of all, you should describe what doesn't work as I aspected means.

I think the value inside the <meter> tag not changing is the problem.

My solution is this, using innerHTML:

<!DOCTYPE HTML>
<html>
<head>
<title>Meter</title>
<script type="text/javascript">
function f(a)
{
    //changing the value
    document.getElementById("prog").value = document.getElementById("prog").value + a;
    //(next two lines) changing the innerHTML, which is the inner HTML of an element.
    var t = parseInt(document.getElementById("prog").innerHTML,10);
    //This makes t+a between 0 and 100.
    document.getElementById("prog").innerHTML = t+a<100?t+a>0?t+a:0:100;
}
</script>
</head>
<body>
<form title="Meter">
<button type="button" onClick="f(-10);" >Subtract</button>
<button type="button" onClick="f(10);" >Add</button>
<meter  min="0" max="100" value="50" id="prog">50</meter>
</form>
</body>
</html>

neeebzz · Accepted Answer · 2011-06-19 23:45:17Z

0

Change the following

var t = parseInt(document.getElementById("prog"),10);

to

var t = parseInt(document.getElementById("prog").value,10);

working version > http://jsfiddle.net/6wJGt/

answered Jun 19, 2011 at 23:45

neeebzz

11.5k7 gold badges50 silver badges65 bronze badges

Comments

Daniel A. White · Accepted Answer · 2011-06-19 23:45:52Z

0

You have to set the property instead the result of the function.

answered Jun 19, 2011 at 23:45

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

1 Comment

Miro Over a year ago

Can you write that down ,please?

Collectives™ on Stack Overflow

function in JavaScript

4 Answers 4

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