Enable/disable Textarea With Checkbox
My task is to use JavaScript to enable the when the checkbox is clicked (on) and disable it when it is clicked (off). However, the code still isn't working, and won't do anything
Solution 1:
The issue is that your function is never being called. You need to bind a click event callback function that invokes enable. You also need some other code tweaks - see comments inline:
// Get reference to checkbox and textarea just once, not over and over// Also, you were using .getElementById(), but your elements weren't // given id's, they have namesvar chk = document.querySelector("input[name=gift]"); // id is not "gift", name isvar textarea = document.querySelector("textarea[name=message"); // id is not "message", name is// Set up click event handler:
chk.addEventListener("click", enable);
functionenable() {
// Just base the disabled of the textarea on the opposite // of the checkbox's checked state
textarea.disabled = !this.checked;
}<divid="container"><h2> Order Information </h2><divclass="entry">
Select color:
<selectname="color"><optionselected="selected">White</option><option>Black</option><option>Red</option><option>Green</option><option>Blue</option></select><br><br>
Select shirt size:
<selectname="sizeandprice"><option>Small - $9.99</option><option>Medium - $10.99</option><optionselected="selected">Large - $11.99</option><option>X-Large - $13.99</option></select><br><br>
Is this a gift? <inputtype="checkbox"name="gift"><br><br>
Write your gift message here: <br><textareadisabledrows="5"cols="50"name="message">Type your message here.
</textarea></div></div>Solution 2:
document.getElementById('giftCheckbox').addEventListener( 'click', function(){
var textArea = document.getElementById('messageTxtArea')
textArea.disabled = !textArea.disabled
});<body><divid="container"><h2> Order Information </h2><divclass="entry">
Select color:
<selectname="color"><optionselected="selected">White</option><option>Black</option><option>Red</option><option>Green</option><option>Blue</option></select><br><br>
Select shirt size:
<selectname="sizeandprice"><option>Small - $9.99</option><option>Medium - $10.99</option><optionselected="selected">Large - $11.99</option><option>X-Large - $13.99</option></select><br><br>
Is this a gift? <inputtype="checkbox"id="giftCheckbox"name="gift"><br><br>
Write your gift message here: <br><textareadisabledrows="5"cols="50"id="messageTxtArea"name="message">Type your message here.
</textarea></div></div></body>I added ids to your checkbox and textarea. I use .addEventListener() to register a callback on your checkbox click event, that enables/disables the textarea element.
Solution 3:
Your input type element has been given a attribute name="gift" and you are searching for a element which contains id="gift". You can change the attribute from name to id or use document.getElementsByName("gift"). See example of usage in document.document.getElementsByName
Post a Comment for "Enable/disable Textarea With Checkbox"