I have a page where I want show multiple countdowns. I made a javascript code that makes the countdown and it works on all divs that i specify, but this goes in real time only on the last div. Can someone help me? I posted the page below.
<html>
<head>
<title>Timer</title>
<head>
<script type="text/javascript">
function Timer(){
this.countdown=function(fineanno, finemese, finegiorno, fineore, fineminuti, finesecondi, nomediv)
{
var_div=nomediv;
var_anno=fineanno;
var_mese=finemese;
var_giorno=finegiorno;
var_ore=fineore;
var_minuti=fineminuti;
var_secondi=finesecondi;
data_scandeza= new Date(var_anno,var_mese-1,var_giorno,var_ore,var_minuti,var_secondi);
data_oggi= new Date();
differenza=(data_scandeza-data_oggi);
giorni=parseInt(differenza/86400000);
differenza=differenza-(giorni*86400000);
ore=parseInt(differenza/3600000);
differenza=differenza-(ore*3600000);
minuti=parseInt(differenza/60000);
differenza=differenza-(minuti*60000);
secondi=parseInt(differenza/1000);
differenza=differenza-(secondi*1000);
if (giorni <= "0" && ore <= "0" && minuti <= "0" && secondi <= "0")
{
document.getElementById(nomediv).innerHTML="Tempo scaduto";
}
else
{
document.getElementById(nomediv).innerHTML=giorni +' giorni '+ore+' ore '+minuti+' min '+secondi+' sec';
setTimeout("t"+var_div+".countdown(var_anno, var_mese, var_giorno, var_ore, var_minuti, var_secondi, var_div)",1000);
}
}
}
</script>
</head>
<body>
<div id="div2"></div>
<script>
var tdiv2 = new Timer();
tdiv2.countdown("2013","04","26", "23","00","00","div2");
</script>
<div id="div3"></div>
<script>
var tdiv3 = new Timer();
tdiv3.countdown("2013","04","26", "23","00","00","div3");
</script>
</body>
</html>
var_div, var_anno, var_mese, var_giorno, var_ore, var_minuti and var_secondi are global variables, because you declared them without using the var keyword. That means all your calls to countdown will access the same variable.
Don't use the name of the variable in your setTimeout, or you'll get the current value of this global variable (the second one set). Instead, use the value of the variable at the time you build the settimeout, like this:
setTimeout("t"+var_div+".countdown(" + var_anno + ", " + var_mese + ", " + var_giorno + ", " + var_ore + ", " + var_minuti + ", " + var_secondi + ",'" + var_div + "')",1000);
In fact I don't see any need for this part at all:
var_div=nomediv;
var_anno=fineanno;
var_mese=finemese;
var_giorno=finegiorno;
var_ore=fineore;
var_minuti=fineminuti;
var_secondi=finesecondi;
Instead of using those new variables, you can just use the parameters that were passed in. I suppose the reason you had that is so the setTimeout would have a variable to read the value from, but with my suggested change above it is no longer necessary.
Related
I have the following JSFiddle: http://jsfiddle.net/uX8ZQ/
Basically I am trying to achieve a continuing for loop until a variable gets to a certain number, loading 5 at a time. This is what I have so far:
HTML:
<button onclick="go()">Load</button>
<p id="demo"></p>
JavaScript:
var max=16;
var y=5;
function go(){
var x="";
for (var i=1;i<=y;i++){
if(i>max){
return;
}
x=x + "The count is " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
y=y+5;
}
The result I get is the loop stops at 15 and won't load 16
I am new to JavaScript and trying to learn my way through loops but this one I cannot seem to get.
By the way, in the JSFiddle I have used window.go = function(){ as JSFiddle will not work by simply defining the function. I am using the above code in my document.
Use break instead of return as return will exit the function before it gets to update the HTML.
function go(){
var x="";
for (var i=1;i<=y;i++){
if(i>max){
break;
}
x=x + "The count is " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
y=y+5;
}
The following code is supposed to display a confirmation box. if the user clicks the ok button, the current time is supposed to be displayed. But for some reason when I test the button by clicking on it nothing happens. I need a fresh pair of eyes to tell me what I'm missing as to why this code isn't working. Thank you for your help:
<script>
function confirmationDemo() {
var ok = confirm("Click OK to show the time, \n or click Cancel to close this window \n
without doing anything.");
var now = new Date();
var hour;
var minute;
if (now.getHours() < 12) {
hour = now.getHours();
} else {
hour = now.getHours() - 12;
}
if (now.getMinutes() < 10) {
minute = "0" + now.getMinutes();
} else {
minute = now.getMinutes();
}
if (ok == true && now.getHours() < 12) {
document.getElementById("confirmationDemoReturn").innerHTML = "The time is: " + hour +
":" + minute + " am.";
} else {
document.getElementById("confirmationDemoReturn").innerHTML = "The time is: " + hour +
":" + minute + " pm.";
}
}
</script>
Try it: <input type="button" value = "Confirmation Box" onClick =
"confirmationDemo();">
<p id="confirmationDemoReturn"></p>
The problem seems to be too simple, the text within the confirmation is not properly concatenated. Hence it was not working.
var ok = confirm("Click OK to show the time, \n or click Cancel to close this window \n
//--- an enter key is pressed
without doing anything.");
I have tested in fiddle
First of all, you should not set events in HTML but in JS. HTML is there for structure, not for interaction. However, if you want to use this method, you have to add the following meta tag in the header of you document:
<meta http-equiv="Content-Script-Type" content="text/javascript">
However, I recommend adding the event in JavaScript like this:
var button = document.getElementById('btn');
button.onclick = confirmationDemo;
Of course after setting an id for your input:
<p id="confirmationDemoReturn"></p>
Check out this Fiddle: http://jsfiddle.net/R5t6z/
When I run the following code in the browser.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to loop through a block of code five times.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x="";
for (var i=0;i<5;i++)
{
x = x + "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
It displays the following
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
below the "Try it" button when it is clicked. My problem is with this part of the code x=x + "The number is " + i + "<br>";. When it is replaced with x="The number is " + i + "<br>"; it only display The number is 4. Some please explain why this is so.
Because x is the string which is displayed. At each increment of the loop, when the "x" on the right-hand side of the equals sign is kept all the old "The number is " + i + "< br >" are kept as well. When the "x" on the right-hand side of the equals sign is deleted, the old strings are overwritten to only show the larger number i.
What you need is a closure. Inside your for loop, try this script
(function(x, i){
x=x + "The number is " + i + "<br>";
})(x, i);
I have a Maze that you go through with your mouse and I have a function for lives which is
var life = 3;
function lives(){
life --;
}
the way I am displaying this lives is
<script type="text/javascript">
document.write("<div id='hp'>" + "Lives: " + life + "</div>");
</script>
I am calling the function with these blocks but they aren't updating the lives Help!
<img id="a1" src="blackpixel.png" onMouseOver="lives()"/>
Your onmouseover only update the value of variable lives, but you do not update the display of Lives. You can add this line after line --;:
document.getElementById('hp').innerHTML = 'Lives: ' + life;
In the document.ready() I have:
$('#menu_indicator').append('<p>' + currPage + ' / ' + pageLimit + '</p>');
pageLimit is always one number that does not change throughout the whole code.
I have it so that when a user clicks a button, it changes currPage to a different number.
(this part is not in document.ready();)
Why doesn't it update it in the indicator?
Any ideas to fix it?
Thanks
The reason your code doesn't work as you expect it to is that you only append it once, it doesn't attach a 'live' handler or something like it.
If you want the indicator to change each time you set a new value for currPage I'd build a function like so:
function setCurrentPage(page) {
currPage = page;
$("#menu_indicator p").html(currPage + " / " + pageLimit);
}
This is of course assuming currPage and pageLimit are declared on a global scope
Demo for Below Code : http://jsbin.com/oruqa3
HTML :
<input type="button" value="click" />
<div id="menu"></div>
JavaScript :
var currPage = 1, pageLimit = 20;
$(function() {
$('input[type=button]').click(function() {
if(currPage <=pageLimit) {
call();
currPage++;
}
});
});
var call = function() {
$('#menu').html('<p>' + currPage + ' / ' + pageLimit + '</p>');
}