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>
asked Jun 19, 2011 at 23:41
Miro
1,8146 gold badges26 silver badges43 bronze badges
-
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– Miro2011年06月19日 23:45:27 +00:00Commented Jun 19, 2011 at 23:45
-
t+a, well I didn't knew where more to look for err.Miro– Miro2011年06月19日 23:46:21 +00:00Commented Jun 19, 2011 at 23:46
4 Answers 4
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 badges417 bronze badges
Sign up to request clarification or add additional context in comments.
Comments
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>
answered Jun 19, 2011 at 23:47
JiminP
2,1302 gold badges20 silver badges26 bronze badges
Comments
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
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 badges474 bronze badges
1 Comment
Miro
Can you write that down ,please?
lang-js