Forum Moderators: open
Here's what I have so far:
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Random Generator</title>
<style type="text/css">
span {padding:15px 0; display:block; font: 1.5em 'Courier New',Courier,monospace}
</style>
</head>
<body>
<div align="center">
<form>
<input value="Generate!" type="submit" style="font-size:16px; font-weight:bold"/>
</div><br>
<span id="result" align="center"></span>
</form>
<script type="text/javascript" src="Random.js"></script>
</body>
</html>
Random.js:
function text(){
}
text = new text();
number = 0;
text[number++] = "one"
text[number++] = "two"
text[number++] = "three"
text[number++] = "four"
text[number++] = "five"
increment = Math.floor(Math.random() * number);
document.getElementById('result').innerHTML = (text[increment]);
Any thoughts?
Thanks.
<input type="button" id="generate" value="Generate!" />
2. Modify Random.js:
(function () {
var generate = document.getElementById('generate');
generate.onclick = function () {
var text = [
"one",
"two",
"three",
"four",
"five"
],
inc = Math.floor(Math.random() * text.length);
document.getElementById('result').innerHTML = text[inc];
}
})();
Note, this example defines an event handler for the button. A better solution would be to define an event listener.
In other words, I defined a function and then execute it immediately. This allows the variables inside to be scoped to this function only (so they don't cause potential conflicts with other scripts).
Hope that helps.
Saved me probably about a week of trying different stuff, plus this eliminates a previous problem I had which I had decided was just impossible to fix!
I'm still new to JavaScript so this was a really good lesson for me.
