Функция Javascript НЕ загружается в события onkeyup и onclick

Question

Функция Javascript НЕ загружается в события onkeyup и onclick

0

Я пытаюсь сделать простой калькулятор с 4 вариантами (/* + -), но почему-то мои события onclick и onkeyup отказываются работать. Я пробовал различные методы, чтобы мои события работали (добавление preventDefault, return false), после чего я отказался, потому что я не смог его исправить. Если вы не возражаете, пожалуйста, помогите мне!

HTML:

<body>
<div id="wrap">
  <div id="header">
      <h1>Simple Calculator</h1>
<form name="form" id="form"> 
    <input type="number" name="addta1" onkeyup="calc();"/>
  <span id="plusadd">+</span>
    <input type="number" name="addta2" onkeyup="calc();"/>
    =
    <span id="addresult"></span> 

    <br/>

    <input type="number" name="subta1" onkeyup="calc();"/>
    -
    <input type="number" name="subta2" onkeyup="calc();"/>
    =
    <span id="subresult"></span>

    <br/>

    <input type="number" name="multa1" onkeyup="calc();"/>
    *
    <input type="number" name="multa2" onkeyup="calc();"/>
    =
    <span id="mulresult"></span>

    <br/>

    <input type="number" name="divta1" onkeyup="calc();"/>
    /
    <input type="number" name="divta2" onkeyup="calc();"/>
    =
    <span id="divresult"></span>

    <br/>
  <div class="buttonwrap">
  <input onclick="calc();" type="submit" value="Submit" name="submit" method="post"/>
  <input type="reset" value="Reset" name="reset"/>
  </div>
</form>
  </div>
  </div>
  </body>

Javascript:

function calc() {
var addOne = parseInt(document.form.addta1.value);
var addTwo = parseInt(document.form.addta2.value);
var subOne = parseInt(document.form.subta1.value);
var subTwo = parseInt(document.form.subta2.value);
var mulOne = parseInt(document.form.multa1.value);
var mulTwo = parseInt(document.form.multa2.value);
var divOne = parseInt(document.form.divta1.value);
var divTwo = parseInt(document.form.divta2.value);

var addResult = addOne + addTwo
var subResult = subOne - subTwo
var mulResult = mulOne * mulTwo
var divResult = divOne / divTwo
document.getElementById('addresult').innerHTML = addResult;
document.getElementById('subresult').innerHTML = subResult;
document.getElementById('mulresult').innerHTML = mulResult;
document.getElementById('divresult').innerHTML = divResult;
}

Вот скрипка с CSS на нем: http://jsfiddle.net/rPCYf/ Я буду публиковать и утверждать, как обычно, каждый полезный пост! Заранее спасибо!

Stoyan Denkov 01 дек. 2013, в 18:40

Источник

Теги:

javascript

html

html5

2 ответа

1

Вы выбрали "onload" в качестве обертки для JS в JSFiddle. Это обертывает все JS в функции, которая вызывается при срабатывании события загрузки.

Последствием (что обычно является желательным) является то, что ваши функции больше не являются глобальными.

Поскольку они не являются глобальными, они не соответствуют вашим внутренним атрибутам событий.

Свяжите обработчики событий с JavaScript вместо атрибутов HTML.

addEventListener('keypress', calc);

http://jsfiddle.net/rPCYf/3/

Quentin 01 дек. 2013, в 15:57

Ещё вопросы

Shomz · Accepted Answer · 2013-12-01T14-28-00.000Z

Когда вы меняете параметр обертки в jsfiddle с "onLoad" на "no wrap-in", он будет работать.

См. Здесь: http://jsfiddle.net/rPCYf/1/

// no code changed

Этот ответ объясняет это и дает вам еще пару вариантов.

Кнопка отправки должна вернуть значение false, чтобы предотвратить обновление страницы (или использовать какой-либо другой метод).

И, еще одно предложение, используйте "onchange" вместо "onkeyup" для просмотра изменений полей ввода (в идеале, не используя атрибуты html, но привязки к группе)... См. Здесь (я изменил только первые два поля): http://jsfiddle.net/rPCYf/2/

РЕЗЮМЕ

измените опцию jsfiddle wrap на "no wrap..."
запретить действие кнопки отправки по умолчанию (самый простой способ - вернуть false в вызове onclick)
рассмотрите возможность использования прослушивателей изменений вместо прослушивателя клавиатуры, поскольку это будет обрабатывать нажатия клавиш, нажатия кнопок, действия колесика мыши и т.д. Это более естественный подход к желаемому поведению.
группируйте соответствующие поля ввода классом, например, и привяжите прослушиватель событий таким образом, вместо того, чтобы использовать атрибут HTML для каждого экземпляра - это сделает ваш код более читабельным и поддерживаемым

Проблема в том, что он не работает в реальном времени или не сохраняется как расширение .html и .js.
Я обновил свой ответ. Что именно не работает сейчас?
В скрипке это работает, а в живую - нет.
Затем либо покажите сообщения об ошибках, либо дайте нам ссылку на предварительный просмотр в реальном времени, потому что гадать нет смысла.
Я переместил JS в HTML, и он все еще в порядке: jsfiddle.net/rPCYf/4
Я сделал то же самое, переместив его в конец корпуса, но проблема возникает, когда вы сохраняете его как расширения на свой компьютер и заставляете их работать. Я боюсь, что кнопка «Отправить» вызывает проблему, потому что она по-прежнему «обновляет» страницу даже при возврате false.
Тогда в консоли должна быть ошибка из-за другого кода или способа, которым вы включаете скрипт. Как именно вы называете файл JS?
Ах да, ты так чертовски прав. Я назвал это как внешний файл, и поэтому он не работал. Мне любопытно, почему он не работает как внешний файл, но работает как внутренний скрипт.