How do I select the calculator buttons to change its class in javascript by using queryselectorAll

18 Views Asked by Task Master At 20 May 2023 at 05:20

<head>

    <title> 

        calculator 

    </title>

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&display=swap'); h3 u{ margin-left:85px; font-family: 'Libre Baskerville', serif; } .icons{ margin-bottom: 300px; margin-left: 500px; } .fa-brands{ margin-left: 10px; margin-top:3px; font-size: small; background-color: black; height:25px; color:white; width:118px; border-radius:3px; padding-top:5px; padding-left:7px; cursor:pointer; } .fa-solid{ margin-top:3px; font-size: small; background-color: black; height:25px; color:white; width:118px; border-radius:3px; padding-top:5px; padding-left:7px; cursor:pointer; } .container{ display:flex; flex-direction:row; width:340px; height:540px; margin-left: 500px; flex-wrap:wrap; font-weight:bold; background-color: orange; border: 3px solid black; box-shadow:2px 2px 5px black; } .button { height: 70px; width : 70px; margin-top: 5px; margin-right: 5px; font-weight:bold; border: 3px solid black; margin-left:5px; border-radius:10px; cursor: pointer; box-shadow:-1px -1px black; } .textfield{ height: 70px; width: 320px; margin-left:7px; border :3px solid black; border-radius:10px; cursor: pointer; box-shadow:-1px -1px black; font-size: large; font-weight:bold; } .equals{ height: 70px; width : 155px; } .C{ background-color:red ; height: 70px; width : 70px; font-weight:bold; margin-left: 5px; border :3px solid black; border-radius:10px; cursor: pointer; box-shadow:-1px -1px black; } .adjust{ margin-left:9px; } .darkcontainer{ background-color: black; border: 3px solid white; } .darkbutton{ background-color: black; } .darkbody{ background-color: black; } .darkfa-brands{ border :3px solid white; } .darkfa-solid{ border :3px solid white; } .darkh3{ color:white; }

<h3  id = "h3"><u>CALCULATOR</u></h3>

<input class = "textfield" type = "text" placeholder="RESULT" name="text" id ="result">

<button type = "button" class ="adjust button"title="clear" onclick="text.value =text.value.toString().slice(0,-1)" >DE

<button type = "button"  class ="button" onclick="text.value += 1">1</button>

<button type = "button"   class ="button" onclick="text.value += 2">2</button>

<button type = "button"   class ="button" onclick="text.value += 3">3</button>

<button type = "button"   class ="button" onclick="text.value += '+'">+</button>

<button type = "button"  class ="button" onclick="text.value += 4">4</button>

<button type = "button"   class ="button" onclick="text.value += 5">5</button>

<button type = "button"   class ="button" onclick="text.value += 6">6</button>

<button type = "button"   class ="button" onclick="text.value += '-'">-</button>

<button type = "button"   class ="button" onclick="text.value += 7">7</button>

<button type = "button"   class ="button" onclick="text.value += 8">8</button>

<button type = "button"   class ="button" onclick="text.value += 9">9</button>

<button type = "button"   class ="button" onclick="text.value += '*'">*</button>

<button type = "button"   class ="button" onclick="text.value += '00'">00</button>

<button type = "button"   class ="button" onclick="text.value += 0">0</button>

<button type = "button"   class ="button equals"  onclick="calc()">=</button>

<i class="fa-solid fa-circle-half-stroke" onclick="change()" id="fas">  Dark mode</i>

<i class="fa-brands fa-linkedin"  id = "fab"> <a href="https://www.linkedin.com/in/ayush-sharma-a155a8267"> Linked in</a> </i>

function calc(){ let c = document.getElementById('result').value; document.getElementById('result').value=eval(c); } function change(){ let cont = document.getElementById("A"); cont.classList.toggle("darkcontainer"); let bo = document.body; bo.classList.toggle("darkbody"); let fas = document.getElementById("fas"); fas.classList.toggle("darkfa-solid"); let fab = document.getElementById("fab"); fab.classList.toggle("darkfa-brands"); let h3 = document.getElementById("h3"); h3.classList.toggle("darkh3"); let buttons = document.querySelectorAll(".button"); buttons.classList.toggle("darkbutton") }

Can someone figure out the problem in code why i cannot select these buttons of my calculator

Original Q&A

How do I select the calculator buttons to change its class in javascript by using queryselectorAll

There are 0 best solutions below

Related Questions in JAVASCRIPT

Related Questions in CSS

Related Questions in BUTTON

Related Questions in CALCULATOR

Related Questions in SELECTORS-API

Trending Questions

Popular # Hahtags

Popular Questions