Sorry if this isn't the proper way to do things, I'm new to coding and stack overflow. I have this code that displays two digits; for now it just asks you at the beginning what color and what digits you want displayed. It uses a stylesheet, which I haven't included.
What I'm trying to do is have an input field instead of a prompt in the beginning. However, this doesn't seem possible to me using a single external Javascript file! As you can see, the javascript is loaded before you can input a value into the input field, and then the page just refreshes when you do enter something in.
Do I need to use seperate external Javascript files? Is this common practice? If not, how do I get the function getDigits to run after typing into the input field?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Digits</title>
<link rel="stylesheet" type="text/cs" href="css.css">
</head>
<body>
<div id="light" class="lightred"></div>
<div id="seg0" class="y"></div>
<div id="segb0" class="y"></div>
<div id="seg10" class="y"></div>
<div id="seg1" class="y"></div>
<div id="seg11" class="y"></div>
<div id="seg2" class="y"></div>
<div id="seg12" class="y"></div>
<div id="seg3" class="y"></div>
<div id="seg13" class="y"></div>
<div id="seg4" class="y"></div>
<div id="seg14" class="y"></div>
<div id="seg5" class="y"></div>
<div id="seg15" class="y"></div>
<div id="seg6" class="y"></div>
<div id="seg16" class="y"></div>
<script type="text/javascript" src="javascript.js"></script>
<form id="digits">
Number: <input id="digits2" type="text" name="digitsBox" value="" />
</form>
</body>
</html>
var y = 'y',
n = 'n';
function changeColor(color) {
switch(color){
case "red":
y = "y";
document.getElementById("light").className = "lightred";
break;
case "green":
y = "y1";
document.getElementById("light").className = "lightgreen";
break;
case "blue":
y = "y2";
document.getElementById("light").className = "lightblue";
break;
}
//return y;
}
//changeColor(prompt("Do you want red, green, or blue?"));
var pattern = [[y, y, y, y, y, y, n], [n, y, y, n, n, n, n], [y, y, n, y, y, n, y],[y, y, y, y, n, n, y], [n, y, y, n, n, y, y], [y, n, y, y, n, y, y], [y, n, y, y, y, y, y], [y, y, y, n, n, n, n], [y, y, y, y, y, y, y], [y, y, y, n, n, y, y]];
function illuminate1(num) {
for (i = 0; i < 11; i++) {
if (num === i) {
document.getElementById("seg0").className = pattern[i][0];
document.getElementById("seg1").className = pattern[i][1];
document.getElementById("seg2").className = pattern[i][2];
document.getElementById("seg3").className = pattern[i][3];
document.getElementById("seg4").className = pattern[i][4];
document.getElementById("seg5").className = pattern[i][5];
document.getElementById("seg6").className = pattern[i][6];
}
}
}
function illuminate2(num) {
for (i = 0; i < 11; i++) {
if (num === i) {
document.getElementById("seg10").className = pattern[i][0];
document.getElementById("seg11").className = pattern[i][1];
document.getElementById("seg12").className = pattern[i][2];
document.getElementById("seg13").className = pattern[i][3];
document.getElementById("seg14").className = pattern[i][4];
document.getElementById("seg15").className = pattern[i][5];
document.getElementById("seg16").className = pattern[i][6];
}
}
}
// This function extracts digits from an input text and illuminates based on the digits
function getDigits(text) {
text = text.toString();
text = text.split("");
console.log(text);
var i = 0;
for (i = 0; i <= text.length; i++) {
text[i] = parseInt(text[i]);
illuminate1(text[i]);
i=i +1;
console.log(i);
break;
}
for (i=i;i <= text.length; i++) {
text[i] = parseInt(text[i]);
illuminate2(text[i]);
i=i+1;
console.log(i);
break;
}
}
//getDigits("35");
var digits = parseInt(document.getElementById('digits2').value);
getDigits(digits);