The problem is with x, which can not be together a global variable (define out the function) and a local variable (as argument for the function)!
You have to choice :
//1/ - With your actual HTML
Code:
var x=0; // a global variable
function plustwo(){
x+=2; // the same global variable but no argument for the function
document.getElementById("number").innerHTML=x;
}
2/ - With a onclick="plusTwo(document.getElementById("number").innerHTML)"
Code:
// no variable definition but an argument the value of the paragraph (which is a string to convert to Number)
function plustwo(x){
document.getElementById("number").innerHTML=Number(x)+2;
}
NB: Do not use number for name, it is confusing with the Number object.
not to show off, but you could even simulate a calculator,
in this case the addition button doesn't do anything, you'd
have to add a way to switch the mode which isn't that hard
and give the function a better name like calc() instead of
addIt():
<html>
<head>
<title>testeroo</title>
<script type="text/javascript">
function addIt(int){
/* grab the current numerical value from the page */
var oldValue = parseInt(document.getElementById("number").innerHTML);
/* add the integer passed in */
var newValue = oldValue + int;
/* update the page */
document.getElementById("number").innerHTML = newValue;
}
function restart(){
/* reset to zero */
document.getElementById("number").innerHTML = 0;
}
</script>
</head>
<body>
<p id="number">0</p>
<button style="width:30px;margin:5px" type="button" onclick="addIt(7)">7</button>
<button style="width:30px;margin:5px" type="button" onclick="addIt(8)">8 </button>
<button style="width:30px;margin:5px" type="button" onclick="addIt(9)">9</button><br />
<button style="width:30px;margin:5px" type="button" onclick="addIt(4)">4</button>
<button style="width:30px;margin:5px" type="button" onclick="addIt(5)">5</button>
<button style="width:30px;margin:5px" type="button" onclick="addIt(6)">6</button><br />
<button style="width:30px;margin:5px" type="button" onclick="addIt(1)">1</button>
<button style="width:30px;margin:5px" type="button" onclick="addIt(2)">2</button>
<button style="width:30px;margin:5px" type="button" onclick="addIt(3)">3</button><br />
<button style="width:30px;margin:5px" type="button" onclick="">+</button>
<button style="width:30px;margin:5px" type="button" onclick="addIt(0)">0</button>
<button style="width:30px;margin:5px" type="button" onclick="restart(9)">C</button><br />
</body>
</html>
Reply With Quote
Bookmarks