How to remove css style on button click in javascript?

Question

I have created an form in which I have made the input field disabled by default->

<input class="name"  type="text" maxlength="50" value="Hritika Agarwal" disabled="" />

I want to make this editable on button click. So created a button like this ->

 <button class="accept-btn" onclick="myFunction()">Edit</button>


   function myFunction() {
   document.getElementById("name").removeAttribute("disabled");
   }

But It's not working.

I have even tried like this also->

     function myFunction() {
    document.getElementById("name").style.disabled = "false";
    }

But again nothing happened. How could I resolve this>

Answer 1

You use getElementById to find an element with the id name but there is not such thing. Use <input id="name" instead of class, then the first will work.

The second can not work, since disabled is not a style-property.

Answer 2

 function myFunction() {
   document.getElementsByClassName("name")[0].removeAttribute("disabled");
 }

Or

<input class="name" id="name"  type="text" maxlength="50" value="Hritika Agarwal" disabled="" />

Answer 3

if you want to select elemnt by class name use getElementsByClassName .

document.getElementsByClassName("name")[0].disabled = false;

If

select elemnt by id use getElementById .change input to

<input id="name"  type="text" maxlength="50" value="Hritika Agarwal" disabled="" />

then

 document.getElementById("name").disabled = false;