Question

我正在使用表单字段和JS函数计算总分数。

问题是计算的总数不会显示，我不确定问题是什么，无论是语法还是按钮。我尝试过其他类型的按钮，但它仍无效。

我的代码：

  figures = [{figureName:'figure1'},{figureName:'figure2'}];
  visibleTooltipforFigure=null;
  showTooltipForFigure(figure) {
      this.visibleTooltip=figure;
  }

Answer 1

您的主要问题是JS最后一行中的额外)：

.value)=

这正在阻止JS完全加载，因此浏览器未运行您的功能lol()。

除此之外，这里还有更多问题：

由于要使用JS手动处理表单，因此您需要覆盖表单的默认提交操作。您可以捕获并覆盖JS中的Submit事件，但是将按钮<input>（或<button>）显式设置为type="button"而不是type="submit"更容易。最终，由于您是在JS中处理表单，因此当所有条件都通过时，您还将在JS中提交表单。
强烈建议不要在按钮中使用onclick运行JS函数。最好在JS中为按钮创建一个侦听器，然后相应地运行一个函数。有很多关于此的古老讨论。
稍微整理一下HTML。从HTML元素中删除任何空的action=或style=。
在处理表单时，如果任何字段为空白（或非数字输入），则在尝试加总所有字段时将导致错误（“ NaN”）。作为起点，也许所有字段都应该是默认的“ 0”隐藏值。无论如何，确认字段数据类型是您应该在此表单中进行的许多检查之一。

Codepen

function lol() {
  console.log("Processing");
  var hot1 = parseInt(document.getElementById('HOT1Marks').value);
  var hot2 = parseInt(document.getElementById('HOT2Marks').value);
  var assignment = parseInt(document.getElementById('AssgMarks').value);
  var miniproject = parseInt(document.getElementById('MiniPMarks').value);
  var finalexam = parseInt(document.getElementById('FinalMarks').value);
  var Total = parseInt(hot1 + hot2 + assignment + miniproject + finalexam);
  document.getElementById('TotalMarks').value = Total;
}

document.getElementById ("button_process").addEventListener ("click", lol, false);

img {
  background-color: grey;
  margin:0;
}

h2 {
  text-align : center;
  font : bold;
}

#bod1 {
  margin: auto;
}

table {
  margin: auto;
  width: 48%;
  padding: 3px;
}

#tr1 {
  margin : 0;
}

td1 {
  padding:2px;
}

<table>
  
<form>

<tr>
<td colspan="2"></td>
<td>Name : <input type="text" name="name"></td>
<td>Student ID : <input type="text" name="studentid"></td>
</tr>

<tr>
<td><b>Assessment Type</td>
<td><b>Total percentage</td>
<td><b>Total marks</td>
<td><b>Your marks</td>
<td><b>Percentage</td>
</tr>

<tr>
<td id="tr1" style=><b>HOT #1: </td>
<td><b>15%</td>
<td><b>60</td>
<td><input type="text" id="HOT1Marks"></td>
</tr>

<tr>
<td><b>HOT #2: </td>
<td><b>10%</td>
<td><b>80</td>
<td><input type="text" id="HOT2Marks"></td>
</tr>

<tr>
<td><b>Assignment:</td>
<td><b>5%</td>
<td><b>30</td>
<td><input type="text" id="AssgMarks"></td>
</tr>

<tr>
<td><b>Mini Project:</td>
<td><b>30%</td>
<td><b>60</td>
<td><input type="text" id="MiniPMarks"></td>
</tr>

<tr>
<td><b>Final Exam:</td>
<td><b>40%</td>
<td><b>100</td>
<td><input type="text" id="FinalMarks"></td>
</tr>

<tr>
<td colspan="2"></td>
<td><b>Total Marks:</td>
<td><input type="text" id="TotalMarks"></td>
</tr>

<tr>
<td><button type="button" id="button_process">Process</input>
    </td>
  <td><button type="reset" id="button_reset">Reset</button></td>
</tr>

</form>

</table>

JS：添加表单字段数据，总计不会显示

1 个答案: