CODEWITHSUNDEEP
javascripthtmlcss
Michael Schädler
Michael Schädler

Reputation: 1

Why doesnt my js calculator combiend with the html work?

I am trying to make a mark calculator with javascript and css. the css isn`t working and I don't know how to solve it.

I have tried simple things on changing the js. The html form should be fine. 

   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>

Upvotes: 0

Views: 87

Answers (1)

junvar
junvar

Reputation: 11574

1) First, read the error message:

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

2) Then look at your usage of 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) Lastly, try double checking the syntax (because the error is a syntax error)

Specifically, you can't do var x, var y; in Javascript (nor in most languages). To declare multiple variables you must do either var x, y or var x; var y;

4) Once you resolve this error, continue repeating steps 1-3 until the remaining errors are resolved (there are more). This process combined with stackoverflow searching can help resolve most coding problems.

Upvotes: 1

Related Questions