Не работает кнопка вывода калькулятора. Выдает undefined. Что делать?

Question

Pr1000000 @Pr1000000

JavaScript

Не работает кнопка вывода калькулятора. Выдает undefined. Что делать?

Написала калькулятор, все кнопки выводятся, как надо, но самая основная - кнопка вывода все время возвращает undefined. Возможно проблема в том, что не правильно сформулирована функция или eval.

(function () {
   let screen = document.querySelector('.screen');
   let buttons = document.querySelectorAll('.btn');
   let clear = document.querySelector('.btn-clear');
   let equal = document.querySelector('.btn-equal');
   let answer = '';

   buttons.forEach(function (button) {
      button.addEventListener('click', function (e) {
         let value = e.target.dataset.num;
         screen.value += value;
      })
   });


   let Result = () => {
      try {
         screen.value = eval(screen.value);
      }
      catch (err) {
         alert('Enter the valid input');
      }
   };



   clear.addEventListener('click', function (e) {
      screen.value = '';
   });

})();

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Document</title>
</head>
<body>
   <section class="calculator">
      <form>
         <input type="text" class="screen">
      </form>
      <div class="buttons">
         <button class="btn btn-yellow" data-num=""></button>
         <button class="btn btn-yellow" data-num="/">/</button>
         <button class="btn btn-yellow" data-num="+">+</button>
         <button class="btn btn-yellow" data-num="-">-</button>

         <button class="btn btn-grey" data-num="9">9</button>
         <button class="btn btn-grey" data-num="8">8</button>
         <button class="btn btn-grey" data-num="7">7</button>
         <button class="btn btn-grey" data-num="6">6</button>
         <button class="btn btn-grey" data-num="5">5</button>
         <button class="btn btn-grey" data-num="4">4</button>
         <button class="btn btn-grey" data-num="3">3</button>
         <button class="btn btn-grey" data-num="2">2</button>
         <button class="btn btn-grey" data-num="1">1</button>
         <button class="btn btn-grey" data-num="0">0</button>
         <button class="btn btn-grey" data-num=".">.</button>

         <button class="btn btn-equal" onclick="Result()">=</button>
         <button class="btn btn-clear">C</button>
      </div>
   </section>
   <script src="script.js"></script>
</body>
</html>

Вопрос задан более двух лет назад
157 просмотров

7 комментариев

Подписаться 1 Простой 7 комментариев

v3shin @v3shin

А у вас случаем такая ошибка не возникает?
Uncaught ReferenceError: Result is not defined

Написано более двух лет назад
Ankhena @Ankhena Куратор тега JavaScript

Выньте Result из функции

Написано более двух лет назад
Pr1000000 @Pr1000000 Автор вопроса

Ankhena, не помогло(

Написано более двух лет назад
Pr1000000 @Pr1000000 Автор вопроса

v3shin, нет, по поводу result(при наведении) пишет: 'Result' is declared but its value is never read.

Написано более двух лет назад

Nekio @QuayS1de

Попробуйте убрать обёртку функции, также у вас value берёт значение data-num каждой кнопки, а если data-num не указан у кнопки, то выдаёт undefined, так собственно и появляется undefined в поле input.

let screen = document.querySelector('.screen');
let buttons = document.querySelectorAll('.btn');
let clear = document.querySelector('.btn-clear');
let equal = document.querySelector('.btn-equal');
let answer = '';

buttons.forEach( (button) => {
    button.addEventListener('click', function (e) {
        let value = e.target.dataset.num;
        value !== undefined ? screen.value += value : false
    })
});

clear.addEventListener('click', function (e) {
   screen.value = '';
});

let result = () => {
    try {
         screen.value = eval(screen.value);
      }
    catch (err) {
         alert('Enter the valid input');
    }
}

Написано более двух лет назад

Ankhena @Ankhena Куратор тега JavaScript

Pr1000000, и еще обратите внимание на let buttons = document.querySelectorAll('.btn');
А именно что вы делаете при нажатии на .btn и какие кнопки входят в эту коллекцию.

https://codepen.io/AnnaSummer/pen/XWqBMOK

p.s. результат работы скрипта лучше выводить в <output>. Это ведь не инпут.
Не вполне ясно зачем там форма.
Почитайте про addEventListener, чтобы не вешать onClick инлайном. Чтобы в вашем случае разметка была с разметкой, js с js, а не кашей.
И т.д.

Написано более двух лет назад
Pr1000000 @Pr1000000 Автор вопроса

Nekio, Спасибо вам огромное! Помогло!

Написано более двух лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

Простой
Что происходит со свойством класса при присвоении извне?
- 1 подписчик
- 14 часов назад
- 64 просмотра
3

ответа
JavaScript

+1 ещё

Простой
Как правильно застримить большой поток из exec(...).stdout в ответ сервера?
- 1 подписчик
- 17 часов назад
- 50 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как запускать только текущее (открытое) видео в слайдере swiper?
- 2 подписчика
- 22 часа назад
- 97 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как определить инлайн стиль и заменить на соответствующие теги?
- 1 подписчик
- вчера
- 52 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Писал ли кто-то автотесты с помощью Cypress по виджетам на amCharts 5? Можете помочь разъяснить структуру и синтаксис этого дела?
- 2 подписчика
- вчера
- 50 просмотров
0

ответов
JavaScript

Простой
Как не прекращая цикл пройтись?
- 1 подписчик
- вчера
- 105 просмотров
0

ответов
JavaScript

Средний
Можно ли прописать формулу расчёта с нефиксированной скидкой?
- 1 подписчик
- вчера
- 66 просмотров
1

ответ
JavaScript

Простой
Как инициировать скрипт при определенной ширине экрана?
- 1 подписчик
- вчера
- 61 просмотр
1

ответ
JavaScript

Простой
Как задать тригер onchange при изменении value?
- 1 подписчик
- вчера
- 66 просмотров
1

ответ
JavaScript

Средний
Как можно менять ::backdrop через JS?
- 1 подписчик
- вчера
- 61 просмотр
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Frontend-разработчик JavaScript

div. • Ставрополь

от 40 000 до 90 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

Настроить и запустить FB на прилки и PWA сфера iGaming

29 нояб. 2024, в 13:48

120000 руб./за проект

Доработка СРМ laravel

29 нояб. 2024, в 13:46

20000 руб./за проект

Отрисовка страницы “About Us” для сайта Recovery Toolbox

29 нояб. 2024, в 13:30

4000 руб./за проект

А у вас случаем такая ошибка не возникает?
Uncaught ReferenceError: Result is not defined
v3shin, нет, по поводу result(при наведении) пишет: 'Result' is declared but its value is never read.
Попробуйте убрать обёртку функции, также у вас value берёт значение data-num каждой кнопки, а если data-num не указан у кнопки, то выдаёт undefined, так собственно и появляется undefined в поле input.

let screen = document.querySelector('.screen'); let buttons = document.querySelectorAll('.btn'); let clear = document.querySelector('.btn-clear'); let equal = document.querySelector('.btn-equal'); let answer = ''; buttons.forEach( (button) => { button.addEventListener('click', function (e) { let value = e.target.dataset.num; value !== undefined ? screen.value += value : false }) }); clear.addEventListener('click', function (e) { screen.value = ''; }); let result = () => { try { screen.value = eval(screen.value); } catch (err) { alert('Enter the valid input'); } }
Pr1000000, и еще обратите внимание на let buttons = document.querySelectorAll('.btn');
А именно что вы делаете при нажатии на .btn и какие кнопки входят в эту коллекцию.

https://codepen.io/AnnaSummer/pen/XWqBMOK

p.s. результат работы скрипта лучше выводить в <output>. Это ведь не инпут.
Не вполне ясно зачем там форма.
Почитайте про addEventListener, чтобы не вешать onClick инлайном. Чтобы в вашем случае разметка была с разметкой, js с js, а не кашей.
И т.д.
Nekio, Спасибо вам огромное! Помогло!

Answer 1 · 2022-10-12 22:22:09

;(function () {
let screen = document.querySelector('.screen')
let buttons = document.querySelectorAll('.btn')
let clear = document.querySelector('.btn-clear')
let equal = document.querySelector('.btn-equal')
let answer = ''

buttons.forEach(function (button) {
button.addEventListener('click', function (e) {
let value = e.target.dataset.num
if (value) {
screen.value += value
}
})
})

let Result = () => {
try {
screen.value = eval(screen.value)
} catch (err) {
alert('Enter the valid input')
}
}

clear.addEventListener('click', function (e) {
screen.value = ''
})

equal.addEventListener('click', () => {
Result()
})
})()

В разметке убрать онклик на кнопке btn-equal

Не работает кнопка вывода калькулятора. Выдает undefined. Что делать?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт