【发布时间】：2014-04-24 07:15:15
【问题描述】：
抱歉，如果这不是正确的处理方式，我是编码和堆栈溢出的新手。我有这个显示两位数字的代码；现在它只是在开始时询问您要显示什么颜色和数字。它使用了一个样式表，我没有包括在内。
我想要做的是在开始时有一个输入字段而不是提示。但是，这对我来说似乎不可能使用单个外部 Javascript 文件！如您所见，在您可以在输入字段中输入值之前加载 javascript，然后当您输入内容时页面会刷新。
我需要使用单独的外部 Javascript 文件吗？这是常见的做法吗？如果没有，在输入字段中输入后如何让函数 getDigits 运行？
<!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);
【问题讨论】：
-
检查
onblur和onkeypress的输入元素。您包含 javascript 的方式没有区别，它将按照包含在页面中的顺序下载和运行，不知道您为什么这么问。 -
尝试创建一个jsfiddle.net，因为您有这么多代码，问题还不清楚。
-
@sabithpocker 我猜他问这个是因为他不知道。这也是一个完全合理的问题，因为 javascript 将在它应该与 (
#digits2) 做某事的元素出现在页面上之前执行，并且他没有任何东西可以延迟 javascript 的执行，例如window.onload。
标签： javascript forms refresh