I have a project where I need the button that starts the function to be "blocked" for 3.5 seconds after the last click. I mean the button should be still displayed just as it was, but on click it should not react in any way for 3.5 seconds. Here is the sample that displays current time on button click:
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="myFunction()">Date</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
The user should be able to click on the button (and run the function) several times without needing to reload the page.
How do I achieve this?
<button id="button" type="button" onclick="myFunction()">Date</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = Date();
document.getElementById("button").setAttribute('disabled', true);
setTimeout(function(){
document.getElementById("button").removeAttribute('disabled');
}, 3500)
}
</script>
jsFiddle
Related
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>
When I try to load in saved content from the last webpage session the number loads in but the variable dosent change which means when I press the button to add 1 to the variable instead of adding on to the last saved number it starts all the way from one.
heres the code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="collectWood()">chop wood</button>
<p>wood:</p>
<p id="woodOut">0</p>
<button onclick="saveData()">save Data</button>
<button onclick="loadData()">load Data</button>
<script>
var wood = localStorage.getItem;
//saves game data
function saveData() {
localStorage.setItem("woodSave", wood);
}
function loadData() {
document.getElementById('woodOut').innerHTML = localStorage.getItem("woodSave");
}
//outputs one wood when button is clicked
function collectWood() {
wood = wood + 1;
document.getElementById("woodOut").innerHTML = wood;
}
</script>
</body>
</html>
I'd like to change my page while processing something but my page is only updated at the end of the process.
I created this simple code to show the problem.
When I press the button, it should remove the button from the page and show a message while processing the wait function. But it is not. It only hides the button at the end of the function.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function getmybutton() {
$('#mybutton').remove();
$('#end').append('<p>button should be gone now!</p>' );
wait(2000);
$('#end').append('<h1>end of my test</h1>');
}
function wait(ms) {
var start = new Date().getTime();
var end = start;
while (end < start + ms) {
end = new Date().getTime();
}
}
</script>
</HEAD>
<BODY>
<h1>test
</h1>
<button id='mybutton' onclick="getmybutton()" type="submit">press my button</button>
<div id="end">
</div>
</BODY>
</HTML>
You want to use setTimeout() in this situation.
Your implementation will hold up the current thread, setTimeout will wait to execute your endOfTest after the time interval has passed in a seperate thread.
The first parameter is the function you want to execute, and the second parameter is the time in ms in which it will execute the function after that time has elapsed.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function getmybutton() {
$('#mybutton').remove();
$('#end').append('<p>button should be gone now!</p>' );
//Function, Time
setTimeout(endOfTest, 2000);
}
function endOfTest() {
$('#end').append('<h1>end of my test</h1>');
}
</script>
</HEAD>
<BODY>
<h1>test
</h1>
<button id='mybutton' onclick="getmybutton()" type="submit">press my button</button>
<div id="end">
</div>
</BODY>
</HTML>
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 =
I want to display "hello" message for 3 minutes and after that it should be vanished. I want to handle onLoad event of JavaScript. The following is the code that I had tried with onClick because I don't know how to handle onLoad. Please give me correct code.
<html>
<head>
<script type="text/javascript">
function timeMsg()
{
var t=setTimeout("alertMsg()",3000);
}
function alertMsg()
{
document.write("Hello");
}
</script>
</head>
<body>
<form>
<input type="button" value="Display alert box onClick="timeMsg()"/>
</form>
</body>
</html>
You want to show the message first, then start your setTimeout timer with the duration for when you want your "hide" event to fire. Time is also measured in milliseconds, so 60000ms is 60 seconds(1 minute), and 180000ms is 3 minutes.
<script type="text/javascript">
function showMessage() {
document.getElementById("container").innerHTML = "hello!";
setTimeout(function() {
document.getElementById("container").innerHTML = "";
},180000);
}
</script>
</head>
<body onload="showMessage()">
<div id="container"></div>
</body>