hi everyone I am new to Javascript and would like to know how would I refresh an if else statement in javascript every 5 seconds, i have looked and cannot get anything to work thanks in advance.
<script type="text/javascript">
if(total == randnum) {
document.write('Correct');
} else {
document.write('Incorrect');
}
</script>
Do you need to write out the document or can you display the text in some element like a div?
If so then you can try something similar to what 'chopper' suggested:
Assuming you have a div in your page with the id "myDiv"
<div id="myDiv"></div>
Then use this to write out your text:
var myDiv = document.getElementById("myDiv");
setInterval(function () {
if(total == randnum) {
myDiv.innerHTML = "Correct";
} else {
myDiv.innerHTML = "Incorrect";
}
}, 5000);
Wrap the code you want to repeat inside a function an use setInterval() (click for documentation with examples) for repeating it.
myFunction() {
//...
// Your code
//...
}
setInterval(myFunction, 5000);
And if you want it to start immediately and then repeat:
myFunction();
setInterval(myFunction, 5000);
setInterval will execute a given function periodically, for example like this:
setInterval( function() {
if(total == randnum) {
$('#result').append('Correct<br/>');
} else {
$('#result').append('Incorrect<br/>');
}
}, 5000);
Where
Of course you will have to define total and randnum.
See this jsFiddle.
Related
I am completely new in javascript and jquery... I have searched but can not find an answer to my problem...
I need to stop a function that call itself at the end (I read that this is called recursive function)
So my html
<div id="slide_show"></div>
Stop
My js
//call effect on load
$(function() {
moveSlide(true);
});
//move the div
function moveSlide(repeat) {
if(repeat === true) {
$('#slide_show').slideToggle('slow',function() {
setTimeout(function() {
moveSlide(true);
},2000);
});
} else {
return;
}
}
//stop the function
$(document).on('click','.stop',function(e) {
e.preventDefault();
moveSlide(false);
});
The function is called forever but I want to stop the function of being repeated when I click the button
What am I doing wrong?
Try with: clearTimeout() in else condition .
You need to create the setTimeout() in one variable.Then apply the clearTimout() if the condition is false(Its means a else statement)
var timer;
//call effect on load
$(function() {
moveSlide(true);
});
//move the div
function moveSlide(repeat) {
if(repeat === true) {
console.log('running')
$('#slide_show').slideToggle('slow',function() {
timer = setTimeout(function() {
moveSlide(true);
},2000);
});
} else {
clearTimeout(timer);
console.log('stopped')
return;
}
}
//stop the function
$(document).on('click','.stop',function(e) {
e.preventDefault();
moveSlide(false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="slide_show"></div>
Stop
I see that you are calling ever time at the method moveSlide, into the setTimeout
$('#slide_show').slideToggle('slow',function() {
setTimeout(function() {
**///moveSlide(true); ///here , will be calling recursive untill end**
},2000);
});
Test and tell us, if will help it
tks
I have a javascript code that shows some messages every 6 seconds using setInterval function as bellow:
$(function () {
count = 0;
wordsArray = ["<h1>Offer received</h1>", "<h1>Offer reviewed</h1>", "<h1>Decision pending</h1>", "Offer accepted.</h1>"];
setInterval(function () {
$(".lead").fadeOut(400, function () {
$(this).html(wordsArray[count % wordsArray.length]).fadeIn(400);
});
if(count === 3){
clearInterval(window.location.href = "www.mydomain.com");
}
count++;
}, 6000);
});
When the last message is displayed I want to redirect to a URL so I checked the counter and placed a clearInterval when the last message is displayed however it does not go to the url right after the last massage is displayed but geos back to the first one and then redirect, sounds like it continues to loop. How can I fix that please?
Thanks
An interval id is returned by setInterval , you need to use that to stop particular interval.
$(function() {
count = 0;
wordsArray = ["<h1>Offer received</h1>", "<h1>Offer reviewed</h1>", "<h1>Decision pending</h1>", "<h1>Offer accepted.</h1>"];
var intervalTimer = setInterval(function() {
$(".lead").fadeOut(400, function() {
$(this).html(wordsArray[count % wordsArray.length]).fadeIn(400);
});
if (count === 3) {
clearInterval(intervalTimer);
}
count++;
}, 6000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lead"></div>
I'm trying to set local storage from one page("index.html/settest.html"), and check for it on "index.html". If the check comes back with a certain result, it'll execute a function.
I have written some code for this, but it doesn't work. I don't really know why, so I'm hoping to get some assistance here.
Here's what I have on my "settest.html" page. It's really simple -
<script>
window.onload=setlocalstorage() {
localStorage.setItem("one", true);
}
</script>
So the way I understand it, when the page loads, it should set the value of "one" to true in localStorage.
Here's what I have on my "index.html" page -
<script>
window.onload=setInterval(function() {
var one = localStorage.getItem('one') || '';
if (one != 'yes') {
function hideone() {
var elem = document.getElementById("one");
elem.className = "hide";
}
}
}, 1000);
</script>
From what I understand, this should check localStorage every second for "one", and execute the function "hideone" if it comes back yes(or true).
However, when I go to "settest.html", and then visit "index.html", nothing happens. There are no errors in the console, or anything abnormal showing. I just don't get why it won't work.
Thanks in advance, if anyone needs more information or context feel free to ask!
-Mitchyl
You're not defining the window.onload functions correctly. Either:
<script>
window.onload = function() {
localStorage.setItem("one", true);
}
</script>
Or:
<script>
window.onload = loadFunction;
function loadFunction() {
localStorage.setItem("one",true);
}
</script>
And on your other page:
window.onload = function() {
setInterval(function() {
var one = localStorage.getItem('one') || '';
if (one != 'yes') {
function hideone() {
var elem = document.getElementById("one");
elem.className = "hide";
}
}
}, 1000);
};
Additionally, you're setting localStorage.one to true on the first page, and checking if it's yes on the other page. Not sure if this is meant to be or is a mistake.
None of your functions are correctly defined. It looks like you want to do this:
settest.html:
<script>
window.onload=function()
{
localStorage.setItem("one", true);
}
</script>
index.html:
<script>
window.onload = function ()
{
setInterval(function()
{
var one = localStorage.getItem('one') || '';
if (one !== true)
{
var elem = document.getElementById("one");
elem.className = "hide";
}
}, 1000);
}
</script>
Assuming you want it to check every second to see if it needs to set the class on a specific element to 'hide'.
Some of the javascripts on this site: http://www.bristolhotel.com/pizzeria/onlinepizza3.php doesn't work in Firefox. What's the problem?
<script language="JavaScript">
function OpenDiv(popUpDiv){
popUpDiv.style.display="block";
window.setTimeout("Hide();", 2000);
}
function OpenDiv(blanket){
blanket.style.display="block";
window.setTimeout("Hide();", 2000);
}
function Hide() {
document.getElementById('popUpDiv').style.display='none'
document.getElementById('blanket').style.display='none'
}
</script>
<script language="JavaScript">
function OpenCloseDiv(divName) {
if (divName.style.display == "none") {
divName.style.display="block";
} else {
divName.style.display="none";
}
}
</script>
The code you provided isn't actually the problem.
If you look at the error console (I'm assuming you didn't), you'll see errors like "nr11 not defined". And this is why :
<a onclick="OpenCloseDiv(nr11)"
I don't know where you have the variable nr11 defined, but you'll probably want to make it a string: "nr11" instead.
try to change window.setTimeout("Hide();", 2000); to window.setTimeout(Hide, 2000);
I changed the code to this:
<script type="text/javascript">
function OpenCloseDiv(divName){
var div = document.getElementById(divName);
if (div.style.display == "none") {
div.style.display="block";
}
else {
div.style.display="none";
}
}
</script>
<script type="text/javascript">
function OpenDiv(popUpDiv){
var div = document.getElementById(popUpDiv);
div.style.display="block";
window.setTimeout("Hide();", 2000);
}
function OpenDiv(blanket){
var div = document.getElementById(blanket);
div.style.display="block";
window.setTimeout("Hide();", 2000);
}
function Hide()
{
document.getElementById('popUpDiv').style.display='none'
document.getElementById('blanket').style.display='none'
}
</script>
and then added "" ( ) and it seems to work now. :)
Thank you for all your help! Really appreciate it!
Context: On my product website I have a link for a Java webstart application (in several locations).
My goal: prevent users from double-clicking, i. e. only "fire" on first click, wait 3 secs before enabling the link again. On clicking, change the link image to something that signifies that the application is launching.
My solution works, except the image doesn't update reliably after clicking. The commented out debug output gives me the right content and the mouseover callbacks work correctly, too.
See it running here: http://www.auctober.de/beta/ (click the Button "jetzt starten").
BTW: if anybody has a better way of calling a function with a delay than that dummy-animate, let me know.
JavaScript:
<script type="text/javascript">
<!--
allowClick = true;
linkElements = "a[href='http://www.auctober.de/beta/?startjnlp=true&rand=1249026819']";
$(document).ready(function() {
$('#jnlpLink').mouseover(function() {
if ( allowClick ) {
setImage('images/jetzt_starten2.gif');
}
});
$('#jnlpLink').mouseout(function() {
if ( allowClick ) {
setImage('images/jetzt_starten.gif');
}
});
$(linkElements).click(function(evt) {
if ( ! allowClick ) {
evt.preventDefault();
}
else {
setAllowClick(false);
var altContent = $('#jnlpLink').attr('altContent');
var oldContent = $('#launchImg').attr('src');
setImage(altContent);
$(this).animate({opacity: 1.0}, 3000, "", function() {
setAllowClick(true);
setImage(oldContent);
});
}
});
});
function setAllowClick(flag) {
allowClick = flag;
}
function setImage(imgSrc) {
//$('#debug').html("img:"+imgSrc);
$('#launchImg').attr('src', imgSrc);
}
//-->
</script>
A delay can be achieved with the setTimeout function
setTimeout(function() { alert('something')}, 3000);//3 secs
And for your src problem, try:
$('#launchImg')[0].src = imgSrc;
Check out the BlockUI plug-in. Sounds like it could be what you're looking for.
You'll find a nice demo here.
...or just use:
$(this).animate({opacity: '1'}, 1000);
wherever you want in your code, where $(this) is something that is already at opacity=1...which means everything seemingly pauses for one second. I use this all the time.
Add this variable at the top of your script:
var timer;
Implement this function:
function setFlagAndImage(flag) {
setAllowClick(flag);
setImage();
}
And then replace the dummy animation with:
timer = window.setTimeout(function() { setFlagAndImage(true); }, 3000);
If something else then happens and you want to stop the timer, you can just call:
window.clearTimeout(timer);