Java Reference
In-Depth Information
<button id="rainbow">Change Color</button>
<form>
<label for="number">Enter a Number to
Factorize:</label>
<input type="number" name="number" min=1 value="20">
<button type="submit">Submit</button>
</form>
<div id="output"></div>
<script src="js/scripts.js"></script>
</body>
</html>
This web page has a button that will change the background color of the page and an input
field where a number can be entered. The factors will be displayed inside the
output
div.
To get this working, create a folder called js in the same directory as factors.htm; then add
a file called scripts.js that contains the following:
js/scripts.htm
(excerpt)
var button = document.getElementById("rainbow");
var rainbow =
["red","orange","yellow","green","blue","indigo",
↵
"violet"];
function change() {
document.body.style.background = rainbow[Math.floor(7*
↵
Math.random())];
}
button.addEventListener("click", change);
This first piece of code was covered way back in
Chapter 1
and uses an event listener to
change the background color if the button is clicked. We also need to factorize the number
entered in the form, so add this code to the end of scripts.js:
js/scripts.htm
(excerpt, incomplete)
var form = document.forms[0];
form.addEventListener("submit", factorize, false);
