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.
Use <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>
Related
I was working on variables and loop frames and stumbled across this problem. I tried switching some things around but none have succeeded. I put the code in a validator and it showed the document as valid.
Whats missing?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function substitute() {
var myValue = document.getElementById('myTextBox').value
if (myValue.length == 0) {
alert('Please enter a real value in the text box!');
return;
}
var myTitle = document.getElementById('title');
myTitle.innerHTML = myValue;
}
</script>
</head>
<body>
<h1 id="title">JavaScript Example</h1>
<input type="text" id="myTextBox" />
<input type="submit" value="Click Me" onclick="substitute" />
</body>
</html>
Mentioning the name of a variable holding a function doesn't call the function. You have to actually call it explicitly.
This is usually done by placing () after the reference to the function.
onclick="substitute()"
<!DOCTYPE html>
<html>
<body>
<h1>Welcome !</h1>
<p><b>AN OBJECT</b> is also a variable.<b>Thus an object can also be used to store many values.</b></p>
<p id="demo">Click the button given below !</p>
<button type="button" onclick="me()">Click Here !</button>
<script>
function me()
{
var car ={
model:"BMW",class:"C",weight:"500",}
document.getElementById("demo").innerHTML=car.model+"<br>"+car.class+"<br>"+car.weight;
}
}
</script>
</html>
How do I execute the code in such a way that when I press "Click Here !" it is possible for me to see all the properties mentioned in the code ?
You have an extra } in your code. Another way you can do this is that you can pass the car object to me function from the onClick event as you can make that dynamic depending on who the user is.
<button type="button" onclick='me({model:"BMW",class:"C",weight:"500"})'>Click Here !</button>
<script language="javascript" type="text/javascript">
function me(car){
document.getElementById("demo").innerHTML=car.model+"<br>"+car.class+"<br>"+car.weight;
}
</script>
Im trying to add one to a variable on the push of a button in javascript. Here's what I have:
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
var add = 0;
function add1(){add++}
document.write(add);
</script>
<br/>
<input type="button" value="Add One" onclick="add1()" />
</body>
</html>
Well most likely the variable add is being incremented by 1 when you push the button. However that code isn't really doing what you want.
This is probably more like what you're after:
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
var add = 0;
function add1(){
add++;
document.getElementById('numberField').innerHTML = add;
}
</script>
<span id="numberField"></span>
<input type="button" value="Add One" onclick="add1()" />
</body>
</html>
When you do document.write(add) it's replacing everything in the body with the value of add.
We moved the "writing the value" piece of code into the function that is called when you press the button. This is so we redraw the number after it has been incremented.
By updating the contents of an html tag instead of the entire page, we don't loose the button. The html tag has the id numberField, and can be accessed with document.getElementById('numberField');.
I'm trying to count how many times a button is pressed, however I dont think this is right, because the count button keeps incrementing even if the 'Saying Hello' button isn't clicked
Any thoughts?
<!DOCTYPE html>
<html>
<head>
<title>JSExample</title>
</head>
<body>
<script type="text/javascript">
function hello() {
alert("Hello there!");
}
var countClicks = 0;
function upCount() {
if(document.getElementById('hello').onclick = "hello()") {
countClicks++;
alert(countClicks);
return true;
} else {
return false;
}
}
</script>
<p><input type="button" name="button" value="Saying Hello" id="hello" onclick="hello();"/></p>
<p><input type="button" name="click" value="Counting" id="click" onclick="upCount();"/></p>
</body>
</html>
Y, i don't exactly understand your problem. Right now on click 'Saying hello' you are calling a function 'hello()' which only pops up an alert with 'Hello there'. On clicking 'Counting' button, you are checking a very strange condition that i don't exactly understand and then increment the value. So, if you want to count how many times 'say hello' was clicked, and then present it with 'Counting' button, use this code.
<!DOCTYPE html>
<html>
<head>
<title>JSExample</title>
</head>
<body>
<script type="text/javascript">
function hello() {
alert("Hello there!");
countClicks++;
}
var countClicks = 0;
function upCount() {
alert(countClicks);
}
</script>
<p><input type="button" name="button" value="Saying Hello" id="hello" onclick="hello();"/></p>
<p><input type="button" name="click" value="Counting" id="click" onclick="upCount();"/></p>
</body>
</html>
If this is not what you meant, please let me know :)
The condition if(document.getElementById('hello').onclick = "hello()") { is not correct. I'm not sure what it should be doing, but know what it does: it assigns a string hello() to the .onclick callback of the hello element. As a String can't be executed (as opposed to a Function), it effectively removes the callback. You probably want something like this
var countClicks = 0;
function hello() {
alert("Hello there!");
countClicks++;
}
function upCount() {
alert(countClicks);
}
<p><input type="button" name="button" value="Saying Hello" id="hello" onclick="hello();"/></p>
<p><input type="button" name="click" value="Counting" id="click" onclick="upCount();"/></p>
if(document.getElementById('hello').onclick == "hello()")
you've missed one =
This is a javascript meant to be a part of chrome extension. It should print out id when I press the add button.
What it does, though, is I have to press add TWICE to have the id appended where I want it to ( I use this instead of alert)
When debugging, it says that bookmarkBarID is undefined... I suppose this is the error but I dont know how to fix it. Please help
here is the whole code:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var bookmarkBarID;
function getBM(){
chrome.bookmarks.getTree(function(tree){
bookmarkBarID=tree[0].children[0];
});
}
function CreateNewItem()
{
$('#submit').click(function (){
getBM()
console.log(bookmarkBarID);
$('.bookmark').append(bookmarkBarID.id);
})
}
</script>
</head>
<body onload="CreateNewItem();" style="width:1200px">
<div class="bookmark"></div>
<input type="text" value="enter url here" id = 'urlLink' />
<input type="text" value="enter Name title" id='linkName'/>
<input type="text" value="" id='folderName' />
<div><button id="submit">Add</button></div>
</body>
</html>
chrome.bookmarks.getTree is an asynchronous function, which means that it runs at the same time as your other code. The function finishes after the rest of your code executes. To use the function's results, you need to give a callback function that will be called with the results. In this case, you need to move $('.bookmark').append(bookmarkBarID.id); into the callback function:
function getBM(){
chrome.bookmarks.getTree(function(tree){
bookmarkBarID=tree[0].children[0];
console.log(bookmarkBarID);
$('.bookmark').append(bookmarkBarID.id);
});
}
function CreateNewItem()
{
$('#submit').click(function (){
getBM();
})
}
Note: you should use $(document).ready(CreateNewItem); instead of onload (assuming that you are using jQuery).