How to change an input value of type button to lowercase on button click-CodePudding

Let's say I have 5 of these

<input type="button"  value="A">

<input type="button"  value="B">

<input type="button"  value="C">

<input type="button"  value="D">

<input type="button"  value="E">

So basically I want all the buttons with a class of button to change its value from uppercase (A) to lowercase (a) when I click on a specific button like this <input type="button" id="ChangeBtn">

I tried using JavaScript (which im new to) to do this.

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

Using the class list

.change{

text-transform : lowercase

}

CodePudding user response：

you have to use document.querySelectorAll to access multiple elements. Then Array will be created.

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


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

}

CodePudding user response：

you can use this code example:

<!DOCTYPE html>
<html>
  <body>
  
    <input type="button" onclick="Lowercase();" value="Change Letters" />
    <input type="button"  value="A" />
    <input type="button"  value="B" />
    <input type="button"  value="C" />
    <input type="button"  value="D" />
    <input type="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>