Trying to call a javascript function with a button, and the button is not doing anything on click. The debugger returns "uncaught reference error: printNumber is not defined.
printNumber is the function I want to call.
I did a search and most people with this problem did not use the proper syntax for declaring their function, defined their function within another function (function out of scope), or put their functions after they are called. It turns out nothing in my head is running. I tried to put a prompt in it for example, and the prompt did not show up.
Here is my script:
<head>
<script type="javascript">
var x=0;
function addNumber(x){
x = x + 1;
return x;
}
function printNumber(number){
document.getElementById("number").innerHTML=addNumber(number);
}
</script>
</head>
Here is my HTML:
<body>
<p><center><b>The number of times the button has been clicked is ... <b><p>
<br>
<div id="number"></div>
<br>
<form>
<input type="button" id="StartButton" value="Click to add 1 to counter" onClick="printNumber(x)">
</form>
</center>
Can anybody point out to me where the problem is coming from? Thank you, this is for a programming class, and I hope that others who might also encounter this will see this.
Trying to call a javascript function with a button, and the button is not doing anything on click. The debugger returns "uncaught reference error: printNumber is not defined.
printNumber is the function I want to call.
I did a search and most people with this problem did not use the proper syntax for declaring their function, defined their function within another function (function out of scope), or put their functions after they are called. It turns out nothing in my head is running. I tried to put a prompt in it for example, and the prompt did not show up.
Here is my script:
<head>
<script type="javascript">
var x=0;
function addNumber(x){
x = x + 1;
return x;
}
function printNumber(number){
document.getElementById("number").innerHTML=addNumber(number);
}
</script>
</head>
Here is my HTML:
<body>
<p><center><b>The number of times the button has been clicked is ... <b><p>
<br>
<div id="number"></div>
<br>
<form>
<input type="button" id="StartButton" value="Click to add 1 to counter" onClick="printNumber(x)">
</form>
</center>
Can anybody point out to me where the problem is coming from? Thank you, this is for a programming class, and I hope that others who might also encounter this will see this.
Share Improve this question edited Sep 27, 2014 at 4:00 Sharanya Dutta 4,0212 gold badges19 silver badges28 bronze badges asked Sep 27, 2014 at 3:30 Mr.ClefableMr.Clefable 731 gold badge1 silver badge4 bronze badges 4 |1 Answer
Reset to default 10Use <script type="text/javascript"> and note that you can't increment x in the way you wanted. You are incrementing a local variable, not the global one.
<html>
<head>
<script type="text/javascript">
var x=0;
function addNumber(){
x = x + 1;
return x;
}
function printNumber(number){
document.getElementById("number").innerHTML=addNumber();
}
</script>
</head> <body>
<p><center><b>The number of times the button has been clicked is ... <b><p>
<br>
<div id="number"></div>
<br>
<form>
<input type="button" id="StartButton" value="Click to add 1 to counter" onClick="printNumber()">
</form>
</center>
</body>
</html>
myFunction? – sabithpocker Commented Sep 27, 2014 at 3:35