Javascript 没有在输入类型中产生结果

Question

我在下面制作了 html 来显示基于可变因素的时间。 如果没有任何选择，结果应显示为 1 小时 30 分钟。 有了选择，时间会更短。

问题：我无法从函数中获取结果时间以显示在输入类型框中。

对于新手的错误，我很抱歉，因为这是我的第一个脚本

function Clear() {
        document.calculation.reset();
        document.calculation.buff[0].focus();
}
        
function Calculate() {
// First check if only 2 crafting products are selected
    if (document.calculation.buff[3].checked &&
        document.calculation.buff[4].checked) {
            alert('does not work');
            document.calculation.time0.value = '';
            document.calculation.time1.value = '';
            document.calculation.time2.value = '';
            document.calculation.time3.value = '';
            document.calculation.time4.value = '';
    }
        else {


        factor = 60000;
        if (document.calculation.buff[0].checked) {
                factor = factor * 0.8; 
        }       
        if (document.calculation.buff[1].checked) {
                factor = factor * 0.5;
        }       
        if (document.calculation.buff[2].checked) {
                factor = factor * 0.9;  
        }       
        if (document.calculation.buff[3].checked) {
                factor = factor * 0.95; 
        }       
        if (document.calculation.buff[4].checked) {
                factor = factor * 0.95;  
        }   


        if (document.calculation.stable[0].checked) {
		time0 = msTime(90);
	        document.calculation.time0.value = time0;
		document.calculation.time0.focus();
        }
        else {
            document.calculation.time0.value = '';
        }                
}}



// function milliseconds to time
function msTime(s) {
  var ms = (s * factor) % 1000;
  s = (s - ms) / 1000;
  var secs = s % 60;
  s = (s - secs) / 60;
  var mins = s % 60;
  var hrs = (s - mins) / 60;
  return hrs + 'h ' + mins + 'm ' + secs + 's' + ms;
}

<form name="calculation" id="calculation" action="#">

<input type="checkbox" name="buff" value="0"> 0
<input type="checkbox" name="buff" value="1"> 1
<input type="checkbox" name="buff" value="2"> 2
<input type="checkbox" name="buff" value="3"> 3
<input type="checkbox" name="buff" value="4"> 4

<input type="button" value="Reset" id="pop" onclick="Clear()"></span><input type="button" value="Calculate" id="top" onclick="Calculate()">

<input type="checkbox" name="stable" value="0" checked> Result</td>
<input type="text" size="20" name="time0">

</form>

Answer 1

您的 html 和 javascript 有很多问题，让我们从头开始，逐步向下

---

不要依赖浏览器在document 下为您的表单创建变量。最好的办法是使用getElementById 获取对表单的引用，然后使用.elements 对象通过名称引用其中的元素。而不是重复以下内容

document.calculation

这样做一次

var frm = document.getElementById("calculation");

此后，您可以使用以下内容来引用元素

frm.elements["time0"].value = ''; // or frm.elements.time0.value = '';

---

您的 html 没有字段 time1 到 time4，删除这些行，它们会导致 javascript 错误。

---

您引用以下字段

document.calculation.stable[0].checked

然而，html 只有一个名为 stable 的字段，所以这会导致另一个 javascript 错误。删除[0]（并使用上面的建议）

---

您有一个函数msTime，它需要毫秒数，并转换为xxxh yyym zzzs ms 形式的字符串。您传递的时间是几分钟，而不是几毫秒（90 与 5400000 相反）

---

您的要求似乎表明您希望乘以 factor 的值，您根据选中的复选框计算该值。你永远不会做乘法。

---

重新格式化和工作版本：

function Clear() {
    var frm = document.getElementById("calculation");
    frm.reset();
    frm.elements.buff[0].focus();
}
        
function Calculate() {
// First check if only 2 crafting products are selected
    var frm = document.getElementById("calculation");
	if (frm.elements.buff[3].checked &&
                frm.elements.buff[4].checked) {
        alert('does not work');
        frm.elements.time0.value = '';
    }
    else {

        factor = 1;
        if (frm.elements.buff[0].checked) {
                factor = factor * 0.8; 
        }       
        if (frm.elements.buff[1].checked) {
                factor = factor * 0.5;
        }       
        if (frm.elements.buff[2].checked) {
                factor = factor * 0.9;  
        }       
        if (frm.elements.buff[3].checked) {
                factor = factor * 0.95; 
        }       
        if (frm.elements.buff[4].checked) {
                factor = factor * 0.95;  
        }   


        if (frm.elements.stable.checked) {
           time0 = msTime(5400000 * factor);
           frm.elements.time0.value = time0;
           frm.elements.time0.focus();
        }
        else {
            frm.elements.time0.value = '';
        }                
    }
}



// function milliseconds to time
function msTime(s) {
  var ms = (s * factor) % 1000;
  s = (s - ms) / 1000;
  var secs = s % 60;
  s = (s - secs) / 60;
  var mins = s % 60;
  var hrs = (s - mins) / 60;
  return hrs + 'h ' + mins + 'm ' + secs + 's' + ms;
}

<form name="calculation" id="calculation" action="#">

<input type="checkbox" name="buff" value="0"> 0
<input type="checkbox" name="buff" value="1"> 1
<input type="checkbox" name="buff" value="2"> 2
<input type="checkbox" name="buff" value="3"> 3
<input type="checkbox" name="buff" value="4"> 4

<input type="button" value="Reset" id="pop" onclick="Clear()"></span><input type="button" value="Calculate" id="top" onclick="Calculate()">

<input type="checkbox" name="stable" value="0" checked> Result</td>
<input type="text" size="20" name="time0">

</form>

Answer 2

这是一个简单但很难发现的错误，使用

document.calculation.stable.checked

而不是

document.calculation.stable[0].checked