I am working on this small project and to the help I received on here I am proud to say I have accomplished a few tasks.
I have a problem though. I want to roll a dice as many times as the user wants. It only works once!
Last night I did some investigating, but did not solve. I found a generator here that repeats - so I looked at the source. On line 117 it shows the function being called after the function itself. I also tried to put the function call inside of the curly bracket knowingly it would crash the browser (and it did!)
I also found an answer somewhere else online that using onclick() in HTML is old-school and to avoid it. I also found someone that using nodetext instead of the innerHTML property. -- This can be an entirely new thread. XML throws me off in terms of js and HTML. I have worked with XMLN in subtites, video, and programs on local machines.
If it is not advised to use innerHTML or onclick, what is the 'valid' way?
I am fairly intermediate to all of this, so if anyone can direct me to the right thread I would appreciate it.
I got lost with the answer of putting each button into a new variable.
ugh. I am going through a lot of topics. Take a look at my jsfiddle example; can anybody make it so you can keep on hiting the Roll button and it just repeats like a while loop or something?
Tried a way like you shared from the link above. The way I have where the js is separate from HTML. I want to avoid document.getElementById('dce').innerHTML=Math.floor(Math.random()*6)+1; in html.
That is what I did the first time - it works too. The examples you gave above show the js code in the way I am talking about.
I have been thinking more on how this can be solved. Basically I am thinking it can be possible to nest an if statement inside the function itself, but so far it has not worked.
something like:
Code:
var x = random;
function x() {
makes button trigger x;
if ( x() > onclick(one_time) ) {
x.reload(false);
return x();
} else {}
}
In another description of what I want to do is not necessarily reload the entire page - just a block of JavaScript code when triggered by a button on the page. Preferably from cache - not the server.
The example from above makes sense to me, but I cannot get it to work.
The setTimeout() and setTmeclear() methods appear to make a different way to solve it, but remember I am newer at JS and it just seems harder to grasp the concepts of these methods.
From your explanation on the 2nd example I see:
Code:
var x;
function roll() {
makes button trigger && how to random ←- this can be a function
x = setTimeout(roll,30);
}
function gen() {
roll();
setTimeout( function() {
clearTimeout(x);
}, 1000;
}
You see, this is a weird layout of code to me; a function nested inside of a function.: setTimeout( function() {
clearTimeout(x);
}, 1000;
Your frustration is jumping out of the page(s).
Take it easy with small steps at a time making sure what you do does work before you move to the next step.
Also some of the things you are reading have some truth in them BUT wait till you have the basics before going advanced. Albeit keeping those advanced ideas in your head till you have an AaaHaa moment.
Also innerHTML is not evil, at least not any more. Well it never did in my books.
Pray I do not get into trouble here but I believe this is what you are trying to ask for.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>xxx</title>
</head>
<body>
<h1>Dice Game</h1>
<p id="here">Number will show here....eventually</p>
<button id="smacker">Smack Me</button>
<script>
var num, show, btn;
function showNumber() {
num = Math.floor(Math.random() * 6) + 1;
show.innerHTML = num;
btn.innerHTML = 'And Again';
}
function initAll() {
btn = document.getElementById('smacker');
btn.addEventListener('click', showNumber, false);
show = document.getElementById('here');
}
initAll();
</script>
</body>
</html>
Last edited by grumpyOleMan; 02-08-2013 at 10:51 PM.
I have taken the past 2 hours trying to get it to work. The stupid double quotes - single quotes are driving me crazy. The only difference between the example and mine is I set the Math.floor(Math.random() * 59 + 1) inside a variable. I want to do this in order to loop this.
I noticed I made buttons in two ways: <button onclick="blah.....">Click Me</button>, but the more efficient way is <input type="button" value="Click nbsp; Me" onclick="blah..." />
ugh.......... now the quotes
<input type="button" value="Roll" onclick="document.getElementById('gen_num').innerHTML=" + random; /> <- random not in variable.
<input type="button" value="Roll" onclick="document.getElementById('gen_num').innerHTML=' + random;'" /> <- literally + random;
<input type='button' value="Roll" onclick="document.getElementById("gen_num") + random;' /> <- with var random = .innerHTML=Math.floor(Math.random() * 6 + 1);
again, literal variable with single quotes.
<input type="button" value="Roll" onclick="document.getElementById('gen_num').innerHTML=" + random;" "/>
HTML button to repeat; more than one time.
This can be an entirely new thread. XML throws me off in terms of js and HTML. I have worked with XMLN in subtites, video, and programs on local machines.
Reply With Quote
Bookmarks