Try to open jsfiddle.net/3hjLb/1/ then click on "Try it" wait until the 0 and click "Try it" and see happen,
How do the "0" it could go back to 10 if you click on "Try it" a second time?
try to set counter value in onclick event : DEMO
<button onclick="counter = 10;countDown()">Try it</button>
reset your counter variable to 10 before call onclick function
like this
<button onclick="javascript:counter=10; countDown()">Try it</button>
See JS Fiddle
using "if" condition is one option:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bla! </title>
<script type='text/javascript'>
var counter = 10;
function CountDown(obj) {
if (--counter < 0) counter = 10;
obj.innerHTML = "counter=" + counter;
}
</script>
</head>
<body>
<button onclick='CountDown(this)'> Click to countdown (10) </button>
</body>
</html>
Related
I have got stuck to this small thing.
<!DOCTYPE html>
<html>
<head>
<script>
function cnfm(){
var r = window.confirm("hey");
}
</script>
</head>
<body>
<button onclick="cnfm">here</button>
</body>
</html>
Whenever I am pressing on the button, no action.
You should call your method with paranthesis, <button onclick="cnfm()">here</button>
try for best practice and clean code like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id='btn'>here</button>
<script>
let btn = document.querySelector('#btn')
btn.addEventListener('click', ()=>{
let r = window.confirm("hey");
})
</script>
</body>
</html>
this is modern javascript. now your confirm work. if user click of OK then r is equal true and if click on CANCEL thats be false.
My sticking point is how to create two buttons and identify them separately within JS?
What the lecturer asks for in the image to create two buttons and two click functions.
My HTML code with the script tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Popup Boxes Lesson</title>
<body>
<button onclick="Enter Name">Click here for a popup alert</button>
</body>
<script>
function myFunction() {
alert("Enter your Name");
}
function myFunction(){
alert("Generate Greeting");
}
</script>
</html>
First of all create two different functions with different names.
Then you can use them with onclick
OR
Give them id and then use document.getElementById("id") to assign the click event on it. Something like this
<body>
<button id="foo">Click here for a popup alert</button>
</body>
<script>
document.getElementById('foo').onclick = function(){
prompt('Hello world');
}
</script>
There are several problems with your code:
First the click event you assigned to the button does not match the function you created.
Second don't create two functions with same names
The code should look like this:
<!DOCTYPE html>
<html>
<head>
<title>
Example
</title>
</head>
<body>
<button onclick="myFunction()">
Enter your name
</button>
<button onclick="generateMessage()">
Generate Message
</button>
<script>
function myFunction(){
var message = prompt("What is your name?");
}
function generateMessage(){
alert("Hello " + message);
}
</script>
</body>
</html>
I have this sample of code that cancel 1 alert at a time:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-`scale=1.0">`
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>Click the first button alert "Hello" after 3 second</p>
<p>Click the second button to cancel the alert</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myStopFunction()">Stop the Alert</button>
<script>
var myVar;
function myFunction(){
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){
clearTimeout(myVar);
}
</script>
</body>
</html>
But i wanted to cancel all the alert if you press on try it for example
like 3 or 4 times it will have 4 or 3 alerts but if you press on the try it
and alert 3 times and 3 times on the button stop my alert the alert will
cancel.
so the number of clicks will be equal. I wanna create a function in which if you press on try it million times
then press 1 time on stop the alert the alert cancel no matter what.
I tried implementing this code and didn't work out so i need help please.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-`scale=1.0">`
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>Click the first button alert "Hello" after 3 second</p>
<p>Click the second button to cancel the alert</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myStopFunction()">Stop the Alert</button>
<script>
var myVar;
var c`enter code here`ounter=0;
function myFunction(){
myVar=setTimeout(function(){alert("HEllo")},3000);
counter++;
}
function myStopFunction(){
for(var i =0;i<counter+1;i++){
clearTimeout(myVar);
counter--;
}
}
</script>
</body>
</html>
Actually, your code remove just the last timeoutID.
You can put your timeoutID into an array. After you can clear all your timeoutID into a loop.
var arrTimeout = [];
function myFunction() {
var myVar = setTimeout(function() {
console.log("Hello");
}, 3000);
arrTimeout.push(myVar);
}
function myStopFunction() {
arrTimeout.forEach((timeoutID) => {
clearTimeout(timeoutID);
})
arrTimeout = [];
}
<button onclick="myFunction()">Try it</button>
<button onclick="myStopFunction()">Stop the Alert</button>
OLD JS version
var arrTimeout = [];
function myFunction() {
var myVar = setTimeout(function() {
alert("Hello");
}, 3000);
arrTimeout.push(myVar);
}
function myStopFunction() {
for (var l = arrTimeout.length; l--;) {
clearTimeout(arrTimeout[l]);
}
arrTimeout = [];
}
<button onclick="myFunction()">Try it</button>
<button onclick="myStopFunction()">Stop the Alert</button>
How can I display multiline comments or messages within the browser? For example, if I wanted a user to click a box and have the browser display multiple lines in the format of question #1-10:
<!DOCTYPE html>
<html>
<body>
<h1>Mathematics Review</h1>
<p>Click Below For a Quick Review:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">Please Take Notes!</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Question #1";
}
</script>
</body>
</html>
Ultimately, when the user clicks the "Click Me" button, questions should display like this:
Question #1
Question #2
Question #3
Question #4
and so on....
Also, do different browsers behave differently when trying to implement this?
Declare global a variable, clickcount then increment it whenever running myFunction.
On more thing you should remind is keeping comment between script tag avoiding some parsing errors among browsers like firefox, chrome, IE etc.
Here is my solution for you.
<!DOCTYPE html>
<html>
<body>
<h1>Mathematics Review</h1>
<p>Click Below For a Quick Review:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">Please Take Notes!</p>
<script language="JavaScript">
<!--
var clickcount = 1;
function myFunction() {
document.getElementById("demo").innerHTML = "Question #" + clickcount++;
}
-->
</script>
</body>
</html>
And, You can use a setInterval function, if you want some effect like auto increment the number at some period of time.
Here is another one with 10 iteration every time you just click the button.
<!DOCTYPE html>
<html>
<body>
<h1>Mathematics Review</h1>
<p>Click Below For a Quick Review:</p>
<button type="button" onclick="try10Iter()">Click Me!(10 iteration)</button>
<button onclick="myVar = setTimeout(try10Iter, 500)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
<p id="demo">Please Take Notes!</p>
<script language="JavaScript">
<!--
var clickcount = 1;
var countVar;
function stopIterAt(condition)
{
if(clickcount == condition)
{
clearInterval(countVar);
clickcount = 0;
}
}
function myFunction() {
document.getElementById("demo").innerHTML = "Question #" + clickcount++;
stopIterAt(11)
}
function try10Iter()
{
countVar = window.setInterval(myFunction, 500);
}
-->
</script>
</body>
I borrowed some code from the site.
Regards,
You could add <br> tags to your innerHTML value:
document.getElementById("demo").innerHTML = "Question #1<br>Question #2<br>Question #3<br>Question #4";
var count = 1;
function myFunction() {
document.getElementById("demo").innerHTML += "<br/>Question #"+(count++);
}
<h1>Mathematics Review</h1>
<p>Click Below For a Quick Review:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">Please Take Notes!</p>
You can use:
document.getElementById("demo").innerHTML += "<br/>Question #" + ++question;
where question is a global variable initialized to zero - see demo below:
var question = 0;
function myFunction() {
document.getElementById("demo").innerHTML += "<br/>Question #" + ++question;
}
<h1>Mathematics Review</h1>
<p>Click Below For a Quick Review:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">Please Take Notes!</p>
newbie to java script , I want to do like when any one click on first Button,then second button is disabled for 30 seconds , after the enabled of second button, click on second button and third button visible to the user. I know simple disable enable buttons on tutorials Thanks.
<!DOCTYPE html>
<html>
<body>
<input type="button" id="myBtn" value="My Button">
<p>Click the button below to disable the button above.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myBtn").disabled = true;
}
</script>
</body>
</html>
Use setTimeout function to do it.
<script>
function myFunction() {
document.getElementById("myBtn").disabled = true;
setTimeout(function(){
document.getElementById("myBtn").disabled = false;
}, 5000);
}
</script>
Hope it works.
Use setTimeout() function and variables to flag click status:
setTimeout("myFunction();", 30000);
see this plunker http://embed.plnkr.co/ZUmGoGEr2TYHlfPhUJgK/preview
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<input type="button" id="myBtn" value="My Button" onclick="document.getElementById('thirdBtn').style.display='block'">
<input type="button" style="display:none;" id="thirdBtn" value="Third Button">
<p>Click the button below to disable the button above.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById('thirdBtn').style.display='none';
document.getElementById("myBtn").disabled = true;
setTimeout(function(){
document.getElementById("myBtn").disabled = false;
}, 30000);
}
</script>
</body>
</html>