БЛОГ НА HUSL


Как сделать чтобы все кнопки меняли цвет а не только одна при нажатии на стрелку в право?

Автор вопроса: Developer 

let Input = document.querySelector('.num');
let Ac = document.querySelector('.ac');
let Btns = document.querySelector('.buttons');
let Left = document.querySelector('.btn_left');
let Rigth = document.querySelector('.btn_rigth');
let Cont = document.getElementById('cnt');
let Btn = document.querySelector('.btn');



Left.disabled = true;


let finish = false;
let OneNumber = "";
let SecondNumber = "";
let OperationBtn = "";

const numbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "."];
const operations = ["+", "-", "*", "/"];

function clearAll() {
    OneNumber = "";
    SecondNumber = "";
    OperationBtn = "";
    finish = false;
    Input.textContent = "0";
}

Ac.addEventListener("click", clearAll);


Btns.addEventListener("click", CalcStart);

function CalcStart(e) {
    let key = event.target.textContent;

    if (numbers.includes(key)) {
        if (SecondNumber == "" && OperationBtn == "") {
            OneNumber += key;
            Input.textContent = OneNumber;
        }   else if (OneNumber !== "" && SecondNumber !== "" && finish) {
            SecondNumber = key;
            Input.textContent = SecondNumber;
            finish = false;
        }   else {
            SecondNumber += key;
            Input.textContent = SecondNumber;
        }
    }

    if (operations.includes(key)) {
        if (OneNumber !== "") {
        OperationBtn = key;
        Input.textContent = OperationBtn;
        }
    }

    if (key == "=") {
        if (OperationBtn == "+") {
            OneNumber = +OneNumber + +SecondNumber;
        }

        if (OperationBtn == "-") {
            OneNumber = OneNumber - SecondNumber;
        }

        if (OperationBtn == "*") {
            OneNumber = OneNumber * SecondNumber;
        }

        if (OperationBtn == "/") {
            OneNumber = OneNumber / SecondNumber;
        }

        if (OneNumber == Infinity) {
            OneNumber = "Error";
        }

        Input.textContent = OneNumber;
        finish = true;
    }
}



Rigth.addEventListener("click", function (e) {
    Cont.className = "theme";
    Btn.className = "themebtn";
    Input.className = "themenum";

})
.container {

}

.content {
    display: grid;
    grid-template-areas: 
                    "display"
                    "buttons buttons";
    width: 220px;
    height: 320px;
    justify-content: center;
    align-content: center;
    background-color: black;
    border-radius: 10px;
}
.buttons {
    display: grid;
    grid-template-areas: 
                    "numeral operation";
    grid-template-columns: 160px 40px;
    justify-content: center;            
}

.numeral {
    display: grid;
    grid-template-columns: 40px 40px 40px;
    grid-template-rows: 40px 40px 40px 40px 40px;
    grid-gap: 10px;
}

.operation {
    display: grid;
    grid-template-columns: 40px;
    grid-template-rows: 40px 40px 40px 40px;
    grid-row-gap: 10px;
}

.btn {
    background-color: #333;
    color: white;
    border-radius: 100%;
}

.display {
    width: 200px;
    text-align: end;
    margin: 0 auto;
    font-size: 35px;
}

.num {
    margin: 10px 10px 10px 10px;
    color: white;
}

.slide {
    width: 60px;
    margin: 0 auto;
    margin-bottom: 10px;
}

.slide button {
    border-radius: 100%;
}

.theme {
    display: grid;
    grid-template-areas: 
                    "display"
                    "buttons buttons";
    width: 220px;
    height: 320px;
    justify-content: center;
    align-content: center;
    background-color: white;
    border-radius: 10px;
    border: solid 3px #333;
}

.themebtn {
    background-color: black;
    color: white;
    border-radius: 100%;
}

.themenum {
    margin: 10px 10px 10px 10px;
    color: black;
    background-color: #333;
    border-radius: 10px;

}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <div id="cnt" class="content">
            <div class="display">
                <p class="num">0</p>
            </div>
            <div class="buttons">
                <div class="numeral">
                <button class="btn one">1</button>
                <button class="btn two">2</button>
                <button class="btn three">3</button>
                <button class="btn four">4</button>
                <button class="btn five">5</button>
                <button class="btn six">6</button>
                <button class="btn seven">7</button>
                <button class="btn eight">8</button>
                <button class="btn nine">9</button>
                <button class="btn zero">0</button>
                <button class="btn eq">=</button>
                <button class="btn ac">ac</button>
                <button class="btn dot">.</button>
                </div>
                <div class="operation">
                <button class="btn multiply">*</button>
                <button class="btn devide">/</button>
                <button class="btn plus">+</button>
                <button class="btn minus">-</button>
                </div>
            </div>
            <div class="slide">
                <button class="btn_left"><</button>
                <button class="btn_rigth">></button>
            </div>
        </div>
    </div>  


    <script src="my.js" type="text/javascript"></script>
</body>
</html>


Источник

Ответы (1 шт):

Автор решения: Oliver Patterson

let Btn = document.querySelector('.btn'); - тут вы берете только одну кнопку, чтобы выбрать все, нужно воспользоваться querySelectorAll, так мы получим NodeList, по которому нужно будет пройтись с помощью .forEach и сделать нужные действия.

let Input = document.querySelector('.num');
let Ac = document.querySelector('.ac');
let Btns = document.querySelector('.buttons');
let Left = document.querySelector('.btn_left');
let Rigth = document.querySelector('.btn_rigth');
let Cont = document.getElementById('cnt');
const BtnList = document.querySelectorAll('.btn');



Left.disabled = true;


let finish = false;
let OneNumber = "";
let SecondNumber = "";
let OperationBtn = "";

const numbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "."];
const operations = ["+", "-", "*", "/"];

function clearAll() {
    OneNumber = "";
    SecondNumber = "";
    OperationBtn = "";
    finish = false;
    Input.textContent = "0";
}

Ac.addEventListener("click", clearAll);


Btns.addEventListener("click", CalcStart);

function CalcStart(e) {
    let key = event.target.textContent;

    if (numbers.includes(key)) {
        if (SecondNumber == "" && OperationBtn == "") {
            OneNumber += key;
            Input.textContent = OneNumber;
        }   else if (OneNumber !== "" && SecondNumber !== "" && finish) {
            SecondNumber = key;
            Input.textContent = SecondNumber;
            finish = false;
        }   else {
            SecondNumber += key;
            Input.textContent = SecondNumber;
        }
    }

    if (operations.includes(key)) {
        if (OneNumber !== "") {
        OperationBtn = key;
        Input.textContent = OperationBtn;
        }
    }

    if (key == "=") {
        if (OperationBtn == "+") {
            OneNumber = +OneNumber + +SecondNumber;
        }

        if (OperationBtn == "-") {
            OneNumber = OneNumber - SecondNumber;
        }

        if (OperationBtn == "*") {
            OneNumber = OneNumber * SecondNumber;
        }

        if (OperationBtn == "/") {
            OneNumber = OneNumber / SecondNumber;
        }

        if (OneNumber == Infinity) {
            OneNumber = "Error";
        }

        Input.textContent = OneNumber;
        finish = true;
    }
}



Rigth.addEventListener("click", function (e) {
    Cont.classList.toggle("theme");
    BtnList.forEach((btn) => btn.classList.toggle("themebtn"));
    Input.classList.toggle("themenum");

})
.container {

}

.content {
    display: grid;
    grid-template-areas: 
                    "display"
                    "buttons buttons";
    width: 220px;
    height: 320px;
    justify-content: center;
    align-content: center;
    background-color: black;
    border-radius: 10px;
}
.buttons {
    display: grid;
    grid-template-areas: 
                    "numeral operation";
    grid-template-columns: 160px 40px;
    justify-content: center;            
}

.numeral {
    display: grid;
    grid-template-columns: 40px 40px 40px;
    grid-template-rows: 40px 40px 40px 40px 40px;
    grid-gap: 10px;
}

.operation {
    display: grid;
    grid-template-columns: 40px;
    grid-template-rows: 40px 40px 40px 40px;
    grid-row-gap: 10px;
}

.btn {
    background-color: #333;
    color: white;
    border-radius: 100%;
}

.display {
    width: 200px;
    text-align: end;
    margin: 0 auto;
    font-size: 35px;
}

.num {
    margin: 10px 10px 10px 10px;
    color: white;
}

.slide {
    width: 60px;
    margin: 0 auto;
    margin-bottom: 10px;
}

.slide button {
    border-radius: 100%;
}

.theme {
    display: grid;
    grid-template-areas: 
                    "display"
                    "buttons buttons";
    width: 220px;
    height: 320px;
    justify-content: center;
    align-content: center;
    background-color: white;
    border-radius: 10px;
    border: solid 3px #333;
}

.themebtn {
    background-color: black;
    color: white;
    border-radius: 100%;
}

.themenum {
    margin: 10px 10px 10px 10px;
    color: black;
    background-color: #333;
    border-radius: 10px;

}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <div id="cnt" class="content">
            <div class="display">
                <p class="num">0</p>
            </div>
            <div class="buttons">
                <div class="numeral">
                  <button class="btn one">1</button>
                  <button class="btn two">2</button>
                  <button class="btn three">3</button>
                  <button class="btn four">4</button>
                  <button class="btn five">5</button>
                  <button class="btn six">6</button>
                  <button class="btn seven">7</button>
                  <button class="btn eight">8</button>
                  <button class="btn nine">9</button>
                  <button class="btn zero">0</button>
                  <button class="btn eq">=</button>
                  <button class="btn ac">ac</button>
                  <button class="btn dot">.</button>
                </div>
                <div class="operation">
                  <button class="btn multiply">*</button>
                  <button class="btn devide">/</button>
                  <button class="btn plus">+</button>
                  <button class="btn minus">-</button>
                </div>
            </div>
            <div class="slide">
                <button class="btn_left"><</button>
                <button class="btn_rigth">></button>
            </div>
        </div>
    </div>  


    <script src="my.js" type="text/javascript"></script>
</body>
</html>

Но я на вашем месте лучше бы добавлял класс контейнеру и уже в зависимости от этого класса через css назначал бы стили для всего, что нужно изменить.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.