如何点击指定按钮将button类按钮的value转为小写

现有5个class为button的<input type="button">元素，它们的value值分别为大写字母A、B、C、D、E。希望点击id为ChangeBtn的按钮时，将所有button类按钮的value值从大写转为小写。本人刚接触JavaScript，尝试通过以下代码实现但未成功：

我的代码 #

HTML代码 #

<input type="button" class="button" value="A">
<input type="button" class="button" value="B">
<input type="button" class="button" value="C">
<input type="button" class="button" value="D">
<input type="button" class="button" value="E">
<input type="button" id="ChangeBtn">

JavaScript代码 #

<script>
// 触发功能的按钮
Var button = document.gelementById("ChangeBtn");

// 想要修改value为小写的button类按钮
Var value = document.querySelector(".button").value;

button.onclick = function (){
    Value.classList.toggle("change");
}
</script>

CSS代码 #

.change{
    text-transform : lowercase
}

你的代码存在的问题： #

1. 变量与拼写错误：JavaScript区分大小写，Var要改成小写的var（推荐用let/const更规范）；document.gelementById拼写错误，正确写法是document.getElementById；后续调用的Value和定义的变量名value不一致，会触发未定义错误。
2. 元素选择范围错误：document.querySelector(".button")只会选中第一个匹配的按钮，无法获取所有button类元素，需要用document.querySelectorAll(".button")。
3. 逻辑偏差：如果要真正修改按钮的value属性，CSS的text-transform只是视觉上的转换，不会改变实际的value值；如果只是需要视觉效果，你也没有给所有按钮批量添加/移除类。

正确实现方式 #

方案一：真正修改value属性（推荐） #

这种方式会直接改变按钮的value值，不是仅视觉效果：

<script>
// 获取触发按钮
const changeBtn = document.getElementById("ChangeBtn");
// 获取所有button类的按钮集合
const targetButtons = document.querySelectorAll(".button");

changeBtn.onclick = function() {
    // 遍历每个按钮，将value转为小写
    targetButtons.forEach(btn => {
        btn.value = btn.value.toLowerCase();
    });
};
</script>

方案二：仅视觉转换（不修改实际value） #

如果只是想让按钮显示小写，不需要改变value本身，可以用CSS配合JavaScript给所有按钮切换类：

<script>
const changeBtn = document.getElementById("ChangeBtn");
const targetButtons = document.querySelectorAll(".button");

changeBtn.onclick = function() {
    targetButtons.forEach(btn => {
        btn.classList.toggle("change");
    });
};
</script>

CSS保持不变：

.change {
    text-transform: lowercase;
}

内容的提问来源于stack exchange，提问作者Matt