时间戳

首页 > 解决方案 > 为什么我的 js 计算器不能与 html 结合使用？

javascript - 为什么我的 js 计算器不能与 html 结合使用？

问题描述

我正在尝试用 javascript 和 css 制作一个标记计算器。css 不工作，我不知道如何解决它。

我已经尝试过更改 js 的简单方法。html表单应该没问题。 

   document.getElementById("myForm").addEventListener("input", rechne);

document.addEventListener('DOMContentLoaded', function () {
  function rechne () {
    var mathe = document.getElementById('mathe'),
        deutsch = document.getElementById('deutsch'),
        englisch = document.getElementById('englisch'),
        franzoesisch = document.getElementById('franzoesisch'),

    var schnitt  = mathe.valueAsNumber + deutsch.valueAsNumber + englisch.valueAsNumber + franzoesisch.valueAsNumber;

    schnitt = schnitt.toFixed(2);
    document.getElementById('notenschnitt')
    .value = schnitt;

    document.getElementById("notenschnitt")
      .addEventListener("input", rechne);
    }
  );
}
    <form id="myForm">
        <legend>Notenrechner</legend>

         <label for="mathe">Mathe</label>
         <input type="number" min="1" max="6" id="mathe" value="0" step="0.5">

         <label for="deutsch">Deutsch</label>
         <input type="number" min="1" max="6" id="deutsch" value="0" step="0.5">

         <label for="englisch">Englisch</label>
         <input type="number" min="1" max="6" id="englisch" value="0" step="0.5">

         <label for="franzoesisch">Franz&ouml;sisisch</label>
         <input type="number" min="1" max="6" id="franzoesisch" value="0" step="0.5">

         <span>Notenschnitt</span>
         <output id="notenschnitt" for="ergebnis">0</output>

   </form>

标签： javascripthtmlcss

解决方案

1）首先，阅读错误信息：

"message": "Uncaught SyntaxError: Unexpected token var",

2）然后看看你的用法var：

var mathe = document.getElementById('mathe'),
        deutsch = document.getElementById('deutsch'),
        englisch = document.getElementById('englisch'),
        franzoesisch = document.getElementById('franzoesisch'),

    var schnitt  = mathe.valueAsNumber + deutsch.valueAsNumber + englisch.valueAsNumber + franzoesisch.valueAsNumber;

3）最后，尝试仔细检查语法（因为错误是语法错误）

具体来说，您不能var x, var y;使用 Javascript（也不能使用大多数语言）。要声明多个变量，您必须执行var x, y或var x; var y;

4) 解决此错误后，继续重复步骤 1-3，直到解决其余错误（还有更多错误）。此过程与 stackoverflow 搜索相结合可以帮助解决大多数编码问题。

推荐阅读