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 =
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()"
I have 2 buttons, one has an onclick event that when clicked calls a function that is supposed to add an onclick event handler to the second button.
I was able to do this little example in w3schools.com, here is the code:
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn2" onclick="addfunc();">Trigger</button>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
function addfunc(){
document.getElementById("myBtn").onclick = displayDate();
}
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
The intended function is that when clicking "Try it" button before "Trigger", nothing happens, and only after clicking "Trigger" the "Try it" button should work. Problem is when I click "Trigger" it actually runs the function that it is supposed to be executed by the click of "Try it" button.
Hope I explained myself, thanks!
You should use displayDate instead of displayDate(). Because displayDate() directly calls the function.
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn2" onclick="addfunc();">Trigger</button>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
function addfunc(){
document.getElementById("myBtn").onclick = displayDate;
}
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
If you want to pass variables
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn2" onclick="addfunc();">Trigger</button>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
function addfunc(){
document.getElementById("myBtn").addEventListener('click', function(){
displayDate("my params");
});
}
function displayDate(params) {
document.getElementById("demo").innerHTML = Date() + " -- " + params;
}
</script>
</body>
</html>
You can disable the second button (in HTML code) and make a first button an activator of btn1
<body>
<main>
<input class="btn1" type="button" value="enable button 2" name="btn1" onclick="ableBtn2()">
<button Id="btn2" onclick="displayDate()" disabled="true">button 2</button>
<p id="test"></p>
<script type="text/javascript">
function ableBtn2() {
document.getElementById("btn2").disabled = false;
}
</script>
<script type="text/javascript">
function displayDate() {
document.getElementById("test").innerHTML = Date();
}
</script>
</main>
</body>
I've tested this code in an old IE and it works, but on everything else that is modern it seems not to work.
The thing is it works only if the textarea hasn't been modified in any way, then after that it doesn't work. Any changes to the page and suddenly it ceases to function.
<html>
<script>
function clearArea() {
document.getElementById("tarea").innerHTML = "This is what\'s up.";
}
</script>
<body>
<button type="button" onclick="clearArea()">Click me to clear area</button>
<textarea id="tarea"></textarea>
</body>
</html>
Any idea what could be causing this?
Because a textarea does not have innerHTML, it has value.
function clearArea() {
document.getElementById("tarea").value = "This is what\'s up.";
}
<button type="button" onclick="clearArea()">Click me to clear area</button>
<textarea id="tarea"></textarea>
I prefer to use the value attribute, you can use it instead of innerHTML.
Here a demonstration: JSBin
Code
function clearArea() {
document.getElementById("tarea").value = "This is what's up.";
}
I think the main problem is that you forget to wrap your <script> tag in the <head> tag..
This is working :
<html>
<head>
<script>
function clearArea() {
document.getElementById("tarea").innerHTML = "This is what\'s up.";
}
</script>
</head>
<body>
<button type="button" onclick="clearArea()">Click me to clear area</button>
<textarea id="tarea"></textarea>
</body>
</html>
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>
I'm a newbie in javascript. As the title says, I'm trying to call javascript function from html generated by another javascript function. Following is a simple version of this code:
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function myFunction1()
{
var html_text = "<HTML><BODY><FORM><INPUT type=\"button\" onClick=
\"myFunction2()\" value=\"function2\" /></FORM></BODY></HTML>";
document.write(html_text);
document.close();
}
function myFunction2()
{
alert("function2 called!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM><INPUT type="button" onClick="myFunction1()" value="function1"
/></FORM>
</BODY>
</HTML>
When I run firebug, I got an error saying "myFunction2 is not defined". I guess I have to put myFunction2 in html code generated by myFunction1. So I changed my code like this:
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function myFunction1()
{
var html_text = "<HTML><HEAD><SCRIPT language=\"JavaScript
\">function myFunction2(){alert(\"function2 called!\");}
</SCRIPT></HEAD><BODY><FORM><INPUT type=\"button\" onClick=\"myFunction2()\"
value=\"function2\" /></FORM></BODY></HTML>";
document.write(html_text);
document.close();
}
/* function myFunction2()
{
alert("function2 called!");
} */
</SCRIPT>
</HEAD>
<BODY>
<FORM><INPUT type="button" onClick="myFunction1()" value="function1"
/></FORM>
</BODY>
</HTML>
However, after this change I got some messy result and the firebug says "unterminated string literal for var html_text=...". Any suggestions?
Also, my actual myFunction2 is really big, if I have to insert it into the html generated by myFunction1, is there a good way to put it in? Also, the instructor doesn't want us to use a separate file. Thanks!
This will work
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function myFunction1()
{
var html_text = "<HTML><BODY><sc"+"ript type=\"text/javascript\">function myFunction2(){alert('im 2')}</sc"+"ript><FORM><INPUT type=\"button\" onClick=\"myFunction2()\" value=\"function2\" /></FORM></BODY></HTML>";
document.write(html_text);
document.close();
}
function myFunction2()
{
alert("function2 called!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM><INPUT type="button" onClick="myFunction1()" value="function1"
/></FORM>
</BODY>
</HTML>
Note that you cannot include "<script>" in a sttring, you must break it in to "<scr" + "ipt>"
I've put your first version of code into http://jsfiddle.net/EwR6X/, and with one small amend - deleting couple of unwanted line breaks after onClick= - it works just fine.