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;
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;
}
How to produce all this code into a div element using JavaScript.
<div id=parentDiv>
<div id="question1">
QuestionNo 1
<button onclick="setOption(1,1)">A</button>
<button onclick="setOption(1,2)">B</button>
</div>
</div>
I want to insert the div question1 'n' number of times with ids as question2, question3 also the the parameters for calling the function setOption should be like setOption(i,1), setOption(i,2) for every questioni.
I have tried using this.
var paper = document.getElementById("paper");
for (i = 1; i <= NOQ; i++) {
paper.innerHTML += '<div id="question' + i + '">'
var element = document.getElementById("question" + i);
element.innerHTML += 'QuestionNo ' + i + ' :';
element.innerHTML += '<button onclick="setOption(' + i + ',1)">A</button>';
element.innerHTML += '<button onclick="setOption(' + i + ',2)">B</button>';
}
However, this method takes a lot of time when value of n goes more than 200 or so, which makes me think of a loading screen. But the problem is all the n element are banged on the screen at once and not one by one, and same happens with my loading screen. The loading screen is also banged with the other elements at the end of the process.
My questions are, Is this method legal at all? Why is this taking so much amount of time? Is the appendchild method better than this (if yes can someone help me how to insert all this using append child method)? How can i show a loading screen showing progress as each element loads?
I've fixed a few errors but you get general idea.
var paper = document.getElementById("paper");
for(i=1; i<=NOQ; i++){
paper.innerHTML+='<div id="question'+i+'"></div>'
var element = document.getElementById("question" + i);
element.innerHTML='QuestionNo '+i+' :<button onclick="setOption('+i+',1)">A</button><button onclick="setOption('+i+',2)">B</button>';
}
This shouldn't take long to load.
If you are getting long load times, consider pagination.
Check this code:
HTML
<div id=parentDiv>
<div id="question1">
<script>
fn_generate(10);//give any no. in place of 10 i.e. the no of qstns you want.
</script>
</div>
</div>
JavaScript
fn_generate=function(n)
{
for (i=1; i<=n; i++)
{
document.write("QuestionNo " + i);
for(j=1; j<=2; j++)
document.write("<button onclick='setOption("+i+","+j+")'>Ans" + j + "</button>");
document.write("<br>");
}
}
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.
I'm trying to make a generator for a mod menu in Call of Duty. I want people to be able to add a menu or delete one. I'm trying to id the menus sequentially so that I can use the text field values correctly. I made it so that if they delete a menu it changes the ids of all the other menus to one lower and same for the button id, but I don't know how to change the onlick event to remove the right element.
Better yet, if there's a better way to do this, I would love to know it.
<script type="text/javascript">
y = 1
function test2()
{
document.getElementById("test2").innerHTML += "<div id=\"child" + y + "\"><input type=\"text\" value=\"menu name\" \><input id=\"button" + y + "\" type=\"button\" value=\"remove?\" onclick=\"test3(" + y + ")\" /></div>";
y++;
alert(y);
}
function test3(x)
{
document.getElementById("test2").removeChild(document.getElementById("child" + x));
for(var t = x+1;t < y;t++)
{
alert("t is " + t + ". And y is " + y);
document.getElementById("button" + t).setAttribute("onclick" , "test3(t-1)");
document.getElementById("button" + t).id = "button" + (t-1);
document.getElementById("child" + t).id = "child" + (t-1);
}
y--;
}
</script>
<input value="testing" type="button" onclick="test2()" />
<div id="test2" class="cfgcode"></div>
I wouldn't worry about re-indexing all of the elements after you add or remove one, that seems a waste. It would be better to simply write a more generic function, rather than one with the element id hard coded into it.
For example, your first function could be written as so:
function genericFunction(el)
{
var html = ''; // create any new html here
el.innerHTML = html;
}
You can then add onclick handlers such as:
myDiv.onclick = function() { genericFunction(this) };
I would also agree with all the commenters above, use jQuery, it makes any code which interacts with the DOM much much simpler.
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>');
}