простой калькулятор javascript с использованием обработчиков событий

Так что я новичок в javascript, и я занимаюсь обработчиками событий. Я создал обработчик события, когда кнопка нажата, но ничего не происходит. Я попытался посмотреть онлайн-калькуляторы, но все они используют jquery или inline js! Я хочу, чтобы избежать их, так как я пытаюсь улучшить работу обработчиков событий. Вот код, я работаю на кнопку 0, с идентификатором «n0:простой калькулятор javascript с использованием обработчиков событий

<!DOCTYPE html> 
<html> 
    <head> 
     <title> 
      My Javascript Calculator 
     </title> 
    </head> 

    <body> 
     <div id="calculator"> 
      <input type="text" name="display" disabled> 
      <br> 
      <div id="keypad"> 
       <button id="clrEntry">CE</button> 
       <button id="clear">C</button> 
       <button id="divide">/</button> 
       <button id="multiply">*</button> 
       <br> 
       <button id="n1">1</button> 
       <button id="n2">2</button> 
       <button id="n3">3</button> 
       <button id="add">+</button> 
       <br> 
       <button id="n4">4</button></button> 
       <button id="n5">5</button> 
       <button id="n6">6</button> 
       <button id="subtract">-</button> 
       <br> 
       <button id="n7">7</button> 
       <button id="n8">8</button> 
       <button id="n9">9</button> 
       <button id="equal">=</button> 
       <br> 
       <button id="n0">0</button> 
      </div> 
     </div> 
     <script src="calculator.js"></script> 
    </body> 
</html>

Вот содержание calculator.js:

function init() 
    var memory; 
    { 
     document.getElementById('n0').addEventListner("click", number0); 

    } 

function number0() 
    { 
     document.getElementById('display').value += 0; 
     memory += 0; 
     return 0; 
    } 

window.addEventListner("load", init, false);

источник

2015-07-22 Jim

Ваш JavaScript должен иметь '<тип скрипта =«текст/JavaScript»>' обернутые вокруг него, если он будет находиться в вашем HTML файле или быть в отдельном файле .js –

Прошу прощения, я изначально публиковал его неправильно, но он был исправлен в этом посте. Javascript находится в отдельном файле .js. Спасибо за ваше время. Но код все еще не работает. – Jim

Кроме того, переменные не являются глобальными. Если вы объявляете память var в верхней части кода перед вашими функциями, в противном случае переменная памяти выходит за рамки второй функции. Также я бы рекомендовал использовать onClick(). – tash

Множественные проблемы:

addEventListener
var memory должно быть до определения функции init(), а не там, где оно есть.
У вас есть только один слушатель событий для кнопки 0
Там нет элемента с id="display"

В общем, вы должны научиться смотреть на консоли ошибок в браузере, потому что все этот синтаксис и во время выполнения ошибки будут отображаться в консоли ошибок.

источник

2015-07-22 01:02:33 jfriend00

О, мне жаль, скрипт src = "calculator.js" содержит код javascript, который я положил внизу, я не был уверен, как его написать здесь. – Jim

Святая Молия благодарю вас. Первый пост в stackoverflow, определенно, будет работать больше. И благодарю вас! Не могу поверить, что я ошибся и не понял, что я не установил идентификатор дисплея. Ты ответишь на это! Еще раз спасибо. – Jim

Я думаю, что тег скрипта либо пропущен, либо это содержимое, которое вы поместили в файл calculator.js.

Два примечательной ошибка - 1. addEventListener является опечатался 2. вар память должна быть глобальной или положить, что в функции

function init() 
{ 
     var memory; 
    ... 
}

Так после этого будут только логические ошибки в коде.

источник

2015-07-22 01:09:59

Спасибо. Оба найдены и исправлены! – Jim

Можете ли вы, пожалуйста, поддержать мой ответ :) –

Как говорили другие ребята, в вашем коде есть несколько ошибок. Вот исправления, которые я сделал для вашей JavaScript:

var memory; //this needs to be declared before starting the function 

function init() { 
    document.getElementById('n0').addEventListener("click", number0, false); //addEventListener was misspelt 
} 

function number0() { 
    document.getElementById('display').value += 0; 
    memory += 0; 
    return 0; 
} 

window.addEventListener("load", init(), false);

и в HTML:

<div id="calculator"> 
    <input type="text" name="display" id="display" disabled /> 
    <br> 
    <div id="keypad"> 
     <button id="clrEntry">CE</button> 
     <button id="clear">C</button> 
     <button id="divide">/</button> 
     <button id="multiply">*</button> 
     <br> 
     <button id="n1">1</button> 
     <button id="n2">2</button> 
     <button id="n3">3</button> 
     <button id="add">+</button> 
     <br> 
     <button id="n4">4</button> 
     <button id="n5">5</button> 
     <button id="n6">6</button> 
     <button id="subtract">-</button> 
     <br> 
     <button id="n7">7</button> 
     <button id="n8">8</button> 
     <button id="n9">9</button> 
     <button id="equal">=</button> 
     <br> 
     <button id="n0">0</button> 
    </div> 
</div>

Необходим идентификатор «дисплей», добавил к входу для getElementById («Дисплей») селектор и удален второй - на кнопке n4.

Вот рабочая скрипку бревнами консольных https://jsfiddle.net/qdpo9gtt/

источник

2015-07-22 01:33:37

простой калькулятор javascript с использованием обработчиков событий

ответ

Смежные вопросы