Как использовать обработчик событий для щелчка и отображения данных в DOM? - PullRequest
Новая
       8

Как использовать обработчик событий для щелчка и отображения данных в DOM?

0 голосов
/ 27 марта 2020

Я пытаюсь построить простой JavaScript калькулятор. У меня проблемы с функционирующей частью. Я не могу заставить цифры появляться на экране дисплея, и у меня также возникают проблемы с обработчиками событий, которые я могу заставить нажимать все цифры.

HTML

<form name="calculator">

    <div class="calculator_container">

<table id="calculator">
    <caption>
        <input type="text" name="display" id="display" maxlength="40">
    </caption>

    <tr>
        <td><input type="button" value="AC" class="btn" id="allClear"></td>
        <td><input type="button" value="C" class="btn" id="clear"></td>
        <td><input type="button" value="+/-" class="btn" id="plusMinus"></td>
        <td><input type="button" value="/" class="btn" id="operate"></td>
    </tr>

    <tr>
        <td><input type="button" name="seven" value="7" class="btn" id="number"></td>

        <td><input type="button" name="eight" value="8" class="btn" id="number"></td>

        <td><input type="button" name="nine" value="9" class="btn" id="number"></td>

        <td><input type="button" value="x" class="btn" id="operator"></td>
    </tr>

    <tr>

        <td><input type="button" name="four" value="4" class="btn" id="number"></td>
        <td><input type="button" name="five"  value="5" class="btn" id="number" ></td>
        <td><input type="button" name="six"  value="6" class="btn" id="number"></td>
        <td><input type="button" value="-" class="btn" id="operator"></td>

    </tr>

    <tr>
        <td><input type="button" name="one"  value="1" class="btn" id="number"></td>
        <td><input type="button" name="two"  value="2" class="btn" id="number"></td>
        <td><input type="button" name="three"  value="3" class="btn" id="number"></td>
        <td><input type="button" value="+" class="btn" id="operator"></td>


    </tr>



    <tr>

        <td><input type="button" name="zero"  value="0" class="btn" id="number"></td>
        <td><input type="button" value="." class="btn" id="dot"></td>
        <td><input type="button" value="=" class="btn" id="calculate"></td>


    </tr>
</table>
</div>
</form>

JS

let memory = "0";
let current = "0";
let operation = 0;
let maxLength = 30; 


const addDigit = (dig) => {
    if (current.length > maxLength){ 
    current = "Aargh! Too long"; //limit length
       } else { if ((eval(current) == 0) && (current.indexOf(".") == -1)
            ){ current = dig;
           } else { current = current + dig;

           };
    }; };
   document.calculator.display.value = current;
   document.getElementById("number").addEventListener("click", addDigit);





const dot = () => {
    if (current.length == 0) {
        current = "0.";
    } else {
        if (current.indexOf(".") == -1) {
            current = current + ".";
        };
    };

}
    document.calculator.display.value = current;
    document.getElementById("dot").addEventListener("click", dot);


const plusMinus = () => {
    if (current.indexOf("-") == 0) {
        current = current.substring(1);
    } else {
        current = "-" + current;
    };

    document.calculator.display.value = current;
}

    document.getElementById("plusMinus").addEventListener("click", plusMinus);


const clear = () => {
    current = "0";
    document.calculator.display.value = current;
}

    document.getElementById("clear").addEventListener("click", clear);


const allClear = () =>  {
    current = "0";
    operation = 0;
    memory = "0";
    document.calculator.display.value = current;
}

const operate = (op) => {
    if (op.indexOf("*") > -1) {operation = 1; };
    if (op.indexOf("/") > -1) {operation = 2; };
    if (op.indexOf("+") > -1) {operation = 3; };
    if (op.indexOf("-") > -1) {operation = 4; };

    memory = current;
    current = "";
    document.calculator.display.value = current;
}

    document.getElementById("operator").addEventListener("click", operate);


const calculate = () => {
    if (operation == 1) { current = eval(memory) * eval(current); };
    if (operation == 2) { current = eval(memory) / eval(current); };
    if (operation == 3) { current = eval(memory) + eval(current); };
    if (operation == 4) { current = eval(memory) - eval(current); };
    operation = 0;
    memory = "0";
    document.calculator.display.value = current;

}

    document.getElementById("calculate").addEventListener("click", calculate);

const fixCurrent = () =>  {
    current = document.calculator.display.value;
    current = "" + parseFloat(current);
    if (current.indexOf("NaN") != -1) {
        current = "Error!";
    };
    document.calculator.display.value = current;
}

Я знаю, что это легко исправить, но я зашел в тупик и мне нужна помощь завершая этот проект.

1 Ответ

0 голосов
/ 27 марта 2020

Прежде всего: идентификатор должен ВСЕГДА быть уникальным для каждого элемента. Вам также следует избегать использования формы для каждой кнопки, мне это кажется плохим стилем кодирования. Просто используйте кнопки. Более того, вы должны установить поле ввода только для чтения, чтобы пользователь не мог вводить то, что он хочет.

Это минимальный пример, который добавляет обработчик событий для каждой кнопки внутри div-оболочки. Оттуда вы должны пробраться:) 

var wrapper = document.getElementById('wrapper');
wrapper.addEventListener('click', (event) => {
  const isButton = event.target.nodeName === 'BUTTON';
  if (!isButton) {
    return;
  }
  var data = document.getElementById("data");
  data.value = data.value + event.target.value;
})
<input type="text" id="data" readonly>
<div id="wrapper">
<button type="button" value="1">1</button>
<button type="button" value="2">2</button>
</div>
...