Почему мой js-калькулятор не сочетается с HTML-кодом?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь создать калькулятор mark с помощью 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">Franzamp;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. Что конкретно не работает? Что он делает в настоящее время, чего вы не хотите? Как это должно работать?

2. Я не вижу никакого кода css.

3. Какие-либо ошибки или журналы консоли?

4. У первого есть синтаксическая ошибка раньше var schnitt , где , помещается вместо ; . Кроме того, rechne он должен быть объявлен вне события DOMContentLoaded, иначе он не будет доступен.

5. В дополнение к тому, что упомянул @briosheje, ваши конечные скобки перепутались. Нажмите F12 и откройте консоль разработчика, чтобы увидеть ошибки.

Ответ №1:

1) Сначала прочитайте сообщение об ошибке:

«сообщение»: «Неперехваченная синтаксическая ошибка: неожиданный токен 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 может помочь решить большинство проблем с кодированием.

1. Я попытался исправить синтаксические ошибки. Теперь у меня ошибка: строка 17: неожиданный токен). Я посмотрел на синтаксис из document.addEventListener и я думаю, что мне действительно нужно ). Без этого у меня «неожиданный конец ввода».