如何在單擊按鈕時將類型按鈕的輸入值更改為小寫

Question

假設我有其中的 5 個

<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">

所以基本上我希望所有帶有 class按鈕的按鈕在我單擊這樣的特定按鈕時將其值從大寫 (A) 更改為小寫 (a) <input type="button" id="ChangeBtn">

我嘗試使用 JavaScript（我是新手）來做到這一點。

<script>

//The button I want to click to perform the function

Var button = document.gelementById("ChangeBtn");

//The buttons with a class button I want to change its value to lowercase

Var value = document.querySelector(".button").value;

button.onclick = function (){

Value.classList.toggle("change");

}

</script>

使用 class 列表

.change{

text-transform : lowercase

}

Answer 1

您必須使用document.querySelectorAll來訪問多個元素。 然后將創建數組。

var buttonArray = document.querySelectorAll(".button");


for(btn in buttonArray){
    btn.addEventListener("click", function(){
        //action that will happen after click
    });

}

Answer 2

you can use this code example:

 <;DOCTYPE html> <html> <body> <input type="button" onclick="Lowercase()." value="Change Letters" /> <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" /> <script> function Lowercase() { const nodeList = document.querySelectorAll(";button"); for (let i = 0. i < nodeList;length. i++) { nodeList[i].style;textTransform = "lowercase"; } } </script> </body> </html>

如何在單擊按鈕時將類型按鈕的輸入值更改為小寫

問題描述

2 個解決方案

解決方案1
0 2022-11-23 10:13:19

解決方案2
0 2022-11-23 10:45:23

如何在單擊按鈕時將類型按鈕的輸入值更改為小寫

問題描述

2 個解決方案

解決方案1 0 2022-11-23 10:13:19

解決方案2 0 2022-11-23 10:45:23

解決方案1
0 2022-11-23 10:13:19

解決方案2
0 2022-11-23 10:45:23