Калькулятор - нажатия на кнопки не работают - PullRequest
Новая
       5

Калькулятор - нажатия на кнопки не работают

0 голосов
/ 17 сентября 2018

У меня есть вопрос: Я не знаю почему, но мой простой калькулятор не работает. Если я нажимаю на любую -> «мою кнопку» моего калькулятора, ничего не работает, и Javascript не выполняется. Числа или операторы не передаются для отображения в -> "#screen" Вы видите, в чем проблема?

ФАЙЛ HTML: 

<BODY>

<table>

<tr>
<td id="buttonCE">C</td>
<td colspan=3 id="screen" >0</td>
</tr>

<tr>
  <td  class="buttonNumber" >7</td>
  <td  class="buttonNumber" >8</td>
  <td  class="buttonNumber" >9</td>
  <td  class="buttonNumber" >/</td>
</tr>

<tr>
  <td  class="buttonNumber" >4</td>
  <td  class="buttonNumber" >5</td>
  <td  class="buttonNumber" >6</td>
  <td  class="buttonOperator" >-</td>
</tr>

<tr>
  <td  class="buttonNumber" >1</td>
  <td  class="buttonNumber" >2</td>
  <td  class="buttonNumber" >3</td>
  <td  class="buttonOperator" >+</td>
</tr>

<tr>
  <td  class="buttonNumber">0</td>
  <td  class="buttonOperator" >.</td>
  <td  id="buttonResult" >=</td>
  <td  class="buttonOperator">*</td>
</tr>
</table>

<script src="new.js"></script> 
<script src="app.js"></script>      

</BODY>

КОД JAVASCRIPT - NEW.JS: 

'use strict'


var screen = document.querySelector('#screen').textContent




 const eraseFunction = () => {  
    const ceKey = document.querySelector('#buttonCE')
    debugger
    ceKey.onclick = function(e) {
    screen = "" }
}


const resultFunction = () => {
    const resultKey = document.querySelector('#buttonResult') 
    resultKey.onclick = () => {
        let lastCharOfScreen = screen[screen.length-1]
        if (lastCharOfScreen!='+' || lastCharOfScreen!='-' || lastCharOfScreen!='/' || lastCharOfScreen!='*' || lastCharOfScreen!='.' ) {
            screen = eval(screen) }
        else {
            screen = eval(screen.substring(0, screen.length))
        }
    }

}


const numberFunction = () => {
    let numberKeys = document.querySelectorAll('.buttonNumber')
    for (let i=0; i<numberKeys.length; i++) {
        numberKeys[i].onclick = () => {
            let buttonNumberValue = this.innerHTML
            if (screen.length!=1 && screen!=0) {
                screen += buttonNumberValue
            }

        }
    }
}


const operatorFunction = () => {
    let operatorKeys = document.querySelectorAll('.buttonOperator')
    for (let i=0; i<operatorKeys.length; i++) {
        operatorKeys[i].onclick = (e) => {
            let buttonOperatorValue = this.innerHTML
            let lastCharOfScreen = screen[screen.length-1]

            // 1st conditional
            if (screen.length = 0 && buttonOperatorValue=="-") {
                screen+=buttonOperatorValue
            }


            if (screen.length>0) {
            // 2nd conditional
                if (lastCharOfScreen!=buttonOperatorValue) {
                screen += buttonNumberValue
                }

        }
    }
    }

}

КОД JAVASCRIPT -> APP.JS: 

'use strict'

eraseFunction()
resultFunction()
numberFunction()
operatorFunction()

1 Ответ

0 голосов
/ 17 сентября 2018

У вас есть некоторые синтаксические ошибки.

Здесь вы пытаетесь установить для screen.length значение 0, что недопустимо. Длина только для чтения.

if (screen.length = 0 && buttonOperatorValue=="-") {

Должно быть:

if (screen.length == 0 && buttonOperatorValue=="-") {

Здесь buttonNumberValue не определено. Не уверен, что вы имели в виду: 

if (screen.length>0) {
    // 2nd conditional
    if (lastCharOfScreen!=buttonOperatorValue) {
         screen += buttonNumberValue
    }
}

Я бы также рекомендовал использовать точки с запятой для завершения ваших утверждений в JavaScript и правильного форматирования кода.

Я Настоятельно Рекомендуем взглянуть на консоль на наличие ошибок. Вы не доберетесь слишком далеко, не взглянув на ошибки самостоятельно и не отладив.

...