Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.03.2023, 16:57
Tri Tri вне форума
Новичок на форуме
Отправить личное сообщение для Tri Посмотреть профиль Найти все сообщения от Tri
 
Регистрация: 17.02.2023
Сообщений: 7

Изменение в калькуляторе
Всем привет, недавно начал делать свой первый калькулятор HTML+CSS+JS

Сделал его, но его нужно изменить

1.querySelector('.screen p') заменить на что-то более осознанное, в один селектор
2.event функции нужно разбить на несколько частей, например, одна отвечает за обработку нажатий на цифры, а другая за обработку нажатий на мат.операции. А в event-е просто вызывать их в зависимости от того, что сейчас нажато

Нужна помощь в изменении кода

Вот сам JS код

let a = ''; 
let b = ''; 
let sign = '';
let finish  = false;

const digit = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'];
const action = ['-', '+', 'X', '÷'];

const out = document.querySelector('.screen p');

function clearAll () {
    a = ''; 
    b = '';
    sign = '';
    finish = false;
    out.textContent = 0;
}

document.querySelector('.ac').onclick = clearAll;

document.querySelector('.buttons').onclick = (event) => {
    if(!event.target.classList.contains('knop')) return;
    if(event.target.classList.contains('ac')) return;

    out.textContent = '';
    const key = event.target.textContent;

    if (digit.includes(key)) {
        if (b ==='' && sign === '') {
            a += key;
            
            out.textContent = a;
        }
        else if (a!=='' && b!=='' && finish) {
            b = key;
            finish = false;
            out.textContent = b;
        }
        else {
            b += key;
            out.textContent = b;
        }
        console.table(a, b , sign);
        return;
    }

     if (action.includes(key)) {
        sign = key;
        out.textContent = sign;
        console.table(a, b , sign);
        return;
    }

    if (key === '=') {
        if (b ==='') b = a;
        switch (sign) {
            case "+":
                a = (+a) + (+b);
                break;
            case "-":
                a = a - b;
                break;
            case "X":
                a = a * b;
                break;
            case "÷":
                if (b === '0') {
                    out.textContent = 'Разделить на ноль нельзя';
                    a = '';
                    b = '';
                    sign = '';
                    return;
                }
                a = a / b;
                break;
        }
        finish = true;
        out.textContent = a;
        console.table(a, b , sign);
    }

}


HTML

<!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">
    <title>Калькулятор</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="index.js" defer> </script>
    <div class="cal">
        <div class="screen">
            <p>0</p>
        </div>
        <div class="buttons">
            <div class="knop ac pink">AC</div>
            <div class="knop delete pink"><</div>
            <div class="knop percent pink">%</div>
            <div class="knop division pink">÷</div>

            <div class="knop one">1</div>
            <div class="knop two">2</div>
            <div class="knop three">3</div>
            <div class="knop X pink">X</div>

            <div class="knop four">4</div>
            <div class="knop five">5</div>
            <div class="knop six">6</div>
            <div class="knop minus pink">-</div>

            <div class="knop seven">7</div>
            <div class="knop eight">8</div>
            <div class="knop nine">9</div>
            <div class="knop plus pink">+</div>
            
            <div class="knop zero">0</div>
            <div class="knop dot">.</div>
            <div class="knop equals pink">=</div>
        </div>
    </div>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 17.03.2023, 18:16
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Сообщение от Tri
1.querySelector('.screen p') заменить на что-то более осознанное, в один селектор
Ну назначьте этому <p> id="out"
Сообщение от Tri
2.event функции нужно разбить на несколько частей, например, одна отвечает за обработку нажатий на цифры, а другая за обработку нажатий на мат.операции. А в event-е просто вызывать их в зависимости от того, что сейчас нажато
Ну назначьте разным кнопкам разные классы. Для цифр класс diget для операций класс operator. И в зависимости от класса - разные обработчики.
Сообщение от Tri
Нужна помощь в изменении кода
Тут много менять надо. Если учитесь, учитесь делать правильно. Элементы html имеют свою семантику и назначение. div - это для разметки. <a> - для переходов, а что бы нажать и выполнить действие есть <button>. Привыкайте делать правильно.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ещё раз изменение css файла посредством javascript JSN Events/DOM/Window 8 27.03.2020 10:42
изменение картинки при изменении урла и наведении курсора ahid Элементы интерфейса 2 09.02.2014 14:53
Как отловить изменение computedStyle элемента danik.js Events/DOM/Window 8 25.10.2012 16:40
Как обработать изменение масштаба окна в IE8 ? v_k Events/DOM/Window 1 09.08.2010 13:35
Динамическое изменение <input text> baal1988 Events/DOM/Window 4 24.08.2008 17:17