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

时间:2019-04-16 13:54:50

标签: javascript html css

我正在尝试使用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>

1 个答案:

答案 0 :(得分:1)

1)首先,阅读错误消息:

  

“ message”:“未捕获的SyntaxError:意外的令牌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)最后,请尝试仔细检查语法(因为该错误是语法错误)

具体来说,您不能使用Javascript来var x, var y;(大多数语言也不可以)。要声明多个变量,您必须执行var x, yvar x; var y;

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