英文:
Not able to select buttons with class ".button" with the help of "document.querySelectorAll" in javascript
问题
你为什么无法使用 querySelectorAll() 选择具有类名 .button 的按钮，尽管你可以使用 getElementById() 选择它们？这里你尝试改变你的HTML元素的CSS类。
英文:
Here is my current code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let variable = document.querySelectorAll(".button");
variable.classList.toggle("darkbuttons");
<!-- language: lang-html -->
<form>
<input class="textfield" type="text" placeholder="RESULT" name="text" id="result">
<input class="C" type="reset" value="AC" title=" All Clear">
<button type="button" class="adjust button" title="clear" onclick="text.value =text.value.toString().slice(0,-1)">DE</button>
<button type="button" id="f" class="button" onclick="text.value += '.'">.</button>
<button type="button" id="2" class="button" onclick="text.value += '/'">/</button>
<button type="button" id="3" class="button" onclick="text.value += 1">1</button>
<button type="button" id="4" class="button" onclick="text.value += 2">2</button>
<button type="button" id="5" class="button" onclick="text.value += 3">3</button>
<button type="button" id="6" class="button" onclick="text.value += '+'">+</button>
<button type="button" id="7" class="button" onclick="text.value += 4">4</button>
<button type="button" id="8" class="button" onclick="text.value += 5">5</button>
<button type="button" id="9" class="button" onclick="text.value += 6">6</button>
<button type="button" id="10" class="button" onclick="text.value += '-'">-</button>
<button type="button" id="11" class="button" onclick="text.value += 7">7</button>
<button type="button" id="12" class="button" onclick="text.value += 8">8</button>
<button type="button" id="13" class="button" onclick="text.value += 9">9</button>
<button type="button" id="14" class="button" onclick="text.value += '*'">*</button>
<button type="button" id="15" class="button" onclick="text.value += '00'">00</button>
<button type="button" id="16" class="button" onclick="text.value += 0">0</button>
<button type="button" id="17" class="button equals" onclick="calc()">=</button>
<i class="fa-solid fa-circle-half-stroke" onclick="change()" id="fas" title="switch to dark mode">Darkmode</i>
<i class="fa-brands fa-linkedin" id="fab" title="visit profile"> <a href="https://www.linkedin.com/in/ayush-sharma-a155a8267"> Linked in</a> </i>
</form>
<!-- end snippet -->
Why am I not able to select the buttons with class .button with querySelectorAll(), though I am able to select them with getElementById(); here I am trying to change the CSS class of my html elements.
答案1
得分: 1
你需要循环遍历每个按钮，因为document.querySelectorAll()返回一个元素数组。
getElementById()返回单个元素。
let buttons = document.querySelectorAll(".button");
buttons.forEach(button => {
button.classList.toggle("darkbuttons");
});
.darkbuttons {
color: white;
background-color: black;
}
<form>
<input class="textfield" type="text" placeholder="RESULT" name="text" id="result">
<input class="C" type="reset" value="AC" title=" All Clear">
<button type="button" class="adjust button" title="clear" onclick="text.value = text.value.toString().slice(0,-1)">DE</button>
<button type="button" id="f" class="button" onclick="text.value += '.'">.</button>
<button type="button" id="2" class="button" onclick="text.value += '/'">/</button>
<button type="button" id="3" class="button" onclick="text.value += 1">1</button>
<button type="button" id="4" class="button" onclick="text.value += 2">2</button>
<button type="button" id="5" class="button" onclick="text.value += 3">3</button>
</form>
英文:
You need to loop through each button, because document.querySelectorAll() returns an array of elements.
getElementById() returns a single element.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let buttons = document.querySelectorAll(".button");
buttons.forEach(button => {
button.classList.toggle("darkbuttons");
});
<!-- language: lang-css -->
.darkbuttons {
color: white;
background-color: black;
}
<!-- language: lang-html -->
<form>
<input class="textfield" type="text" placeholder="RESULT" name="text" id="result">
<input class="C" type="reset" value="AC" title=" All Clear">
<button type="button" class="adjust button" title="clear" onclick="text.value =text.value.toString().slice(0,-1)">DE</button>
<button type="button" id="f" class="button" onclick="text.value += '.'">.</button>
<button type="button" id="2" class="button" onclick="text.value += '/'">/</button>
<button type="button" id="3" class="button" onclick="text.value += 1">1</button>
<button type="button" id="4" class="button" onclick="text.value += 2">2</button>
<button type="button" id="5" class="button" onclick="text.value += 3">3</button>
</form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论