How to change style using javascript?

Question

<div class="club_member">
<input type="text" size="5" onclick="this.value=''" name="scienceClub" value="2">
</div>

How can I use a simple javascript command to change the value to "0" and place a 'disable=""' in the input style?

neither `value` nor `disabled` are styles, they are attributes or properties of the `input` element. — t.niese, Apr 15 '15 at 05:18
Duplicate to: [How to disable an input type=text?](http://stackoverflow.com/q/2874688/1960455) and [Change value of input onchange?](http://stackoverflow.com/q/5457739/1960455) — t.niese, Apr 15 '15 at 05:20

Rahul Desai · Accepted Answer · 2015-04-15T05:40:37.663

3

Use object.value to set the value and object.disabled to disable the input in Javascript.

Demo:

document.getElementById("button").addEventListener("click", function(){  // I have added a sample button for testing
  
  var inputElementObject = document.getElementById("input");  // get the input element object
  
  inputElementObject.value = "0";  // set the value
  inputElementObject.disabled = true;  // set the disabled property
  
});

<div class="club_member">
  
  <!-- set an ID for the input element -->
  <input type="text" size="5" onclick="this.value=''" name="scienceClub" value="2" id="input">
  
  <button id="button">Click me!</button>
  
</div>

Check out how to set the properties for <input> here on MDN.

edited Apr 15 '15 at 05:40

answered Apr 15 '15 at 05:19

Rahul Desai

15,242
19
83
138

1

I like the idea of you putting it in a button. And thank you so much. I didn't put an id to the input. Instead I did this. document.getElementsByName("scienceClub")[0].value = "0"; document.getElementsByName("scienceClub")[0].disabled = false; – warholzz116 Apr 15 '15 at 05:39
@warholzz116 Thank you. I figured it would be helpful for the demo. :) If you found this answer good enough, please mark it as accepted. – Rahul Desai Apr 15 '15 at 05:41

score 1 · Answer 2 · answered Apr 15 '15 at 05:20

1

First set id in your control like this

<input type="text" id="myControl" size="5" onclick="this.value=''" name="scienceClub" value="2">

Then Try like this in script

var control=document.getElementById("myControl");
control.value=0;
control.setAttribute("disabled", true);

answered Apr 15 '15 at 05:20

Anik Islam Abhi

25,137
8
58
80

Thank you. But instead of setting an id, I've used getElementsbyName("scienceClub")[0]; – warholzz116 Apr 15 '15 at 05:43

score 0 · Answer 3 · answered Apr 15 '15 at 05:26

The below snippet demonstrates how to change the value and disable the input using strictly JavaScript.

document.getElementById("input").value = "0";
document.getElementById("input").disabled = true;

<div class="club_member">
  <input type="text" size="5" onclick="this.value=''" name="scienceClub" value="2" id="input">
</div>

score 0 · Answer 4 · answered Apr 15 '15 at 05:35

Using the same code as you posted. you just have to change its value and it gets disabled.

 <div class="club_member">
 <input type="text" id='something' size="5" onclick="this.value='0'; this.setAttribute('disabled','true');" name="scienceClub" value="2">
 </div>

 <div class="club_member">
 <input type="text" id='something' size="5" onclick='this.value="0"' name="scienceClub" value="2">
 <button onclick="document.getElementById('something').setAttribute('disabled','true');"> Lock the value </button>
 </div>

How to change style using javascript?

4 Answers4