How to change a table cell color based on radio button on another cell with javascript?

Question

I want to change a cell color in case one of the radio buttons in other cells are being clicked. I don't know why my code doesn't work

 <tr> <td>class</td> <td><input name="class"type="radio" onClick="enableElement1(this.form.work_permit);"/></td> <td><input name="class"type="radio" onClick="enableElement2(this.form.work_permit);"/></td> <td><input name="class"type="radio" onclick="disableElement(this.form.work_permit);"/></td> <td><textarea for="work_permit"name="comments"rows="4"cols="20"></textarea></td> </tr> <script> function disableElement() { text.value = ' - NA - '; obj.disabled= true; function enableElement1(obj) { obj.value = ''; obj.disabled = false; } function enableElement2(obj) { obj.value = ''; obj.disabled = false; } </script> <style> enableElement1{ color:green; } enableElement2{ color:red; } </style>

Answer 1

There are a few problems with your current implementation:

1. the <tr> element is not wrapped in either a <tbody> . <thead> , <tfoot> or <table> element (the only elements of which a <tr> element may be a child,
2. the only element with a for attribute is the <label> element; the value of the for attribute should be equal to the id attribute-value of the element to which that <label> refers (a <label> element can refer to only one element, though an <input> , <textarea> or <select> element can be associated with multiple <label> elements),
3. Your <table> data doesn't appear to be tabular in nature (from the short, incomplete sample provided); if you're using a <table> for layout reasons then you should consider changing your approach,
4. you're using multiple functions to do the same thing, albeit with different elements; remember the DRY principle: D on't R epeat Y ourself, and
5. you're using obtrusive JavaScript – with event-handlers (the onclick ) in the HTML – this complicates future maintenance of your code.

With all that in mind, might I suggest an alternative:

 // creating a single named function to handle the required functionality: const activateElement = function() { // here 'this' refers to the element to which the event-listener was bound, // automagically supplied from the EventTarget.addEventListener() method; // from the changed <input> we find the closest <tr> ancestor element: let textarea = this.closest('tr').querySelector('textarea'), // from the chnaged <input> we find the closest <td> ancestor element: cell = this.closest('td'), // from the <td> (the 'cell' variable) we retrieve the textContent, // and convert it to lower-case, using String.prototype.toLowerCase(): active = cell.textContent.toLowerCase(); // here set the custom data-* attribute-value to be equal to the // value retrieved from the <td> ('cell') element: textarea.dataset.isactive = active; // here we set the disabled property to the result of the expression, // if the 'active' variable is exactly equal to 'none' the disabled // property is set to true (and the element is disabled), otherwise // the disabled property is set to false (and the element is enabled): textarea.disabled = active === 'none'; }; // here we retrieve a (non-live) NodeList of all <input> elements with // the 'type' attribute-value equal to 'radio'; we then use // NodeList.prototype.forEach() to iterate over those elements: document.querySelectorAll('input[type=radio]').forEach( // here we use an Arrow function (because we don't need to use 'this'); // 'input' (the argument) is a reference to the current Node of the // NodeList over which we're iterating: (input) => { // here we bind an event-listener to the current <input> element/Node // and bind the activateElement function (note the deliberate lack of // parentheses) as the event-handler for the 'change' event: input.addEventListener('change', activateElement); });

 /* here we select all <textarea> elements with a data-isactive attribute-value is equal to 'one': */ textarea[data-isactive="one"] { background-color: lime; } /* here we select all <textarea> elements with a data-isactive attribute-value is equal to 'two': */ textarea[data-isactive="two"] { background-color: fuchsia; } /* here we select all <textarea> elements; this selector is less specific than the preceding selectors so this will only apply to those <textarea> elements without a 'data-isactive' attribute, or with an attribute-value which is not equal to either 'one' or 'two': */ textarea { background-color: #fff; }

 <!-- using valid HTML, with the <tr> appropriately wrapped in a <tbody> element, itself within a <table> element: --> <table> <tbody> <tr> <th>class</th> <!-- wrapping the <input> elements in <label> elements, in order that the user sees some instruction/guidance as to what the form control does; and removing the onclick event-handler: --> <td><label>one<input name="class" type="radio" /></label></td> <td><label>two<input name="class" type="radio" /></label></td> <td><label>none<input name="class" type="radio" /></label></td> <td><textarea name="comments"></textarea></td> </tr> </tbody> </table>

JS Fiddle demo .

Now, the above function is written specifically to allow for additional rows to be added to the <table> which can call the same function, for example:

 const activateElement = function() { let textarea = this.closest('tr').querySelector('textarea'), cell = this.closest('td'), active = cell.textContent.toLowerCase(); textarea.dataset.isactive = active; textarea.disabled = active === 'none'; }; document.querySelectorAll('input[type=radio]').forEach( (input) => { input.addEventListener('change', activateElement); });

 textarea[data-isactive="one"] { background-color: lime; } textarea[data-isactive="two"] { background-color: fuchsia; } textarea { background-color: #fff; }

 <table> <tbody> <tr> <th>class</th> <td><label>one<input name="class1" type="radio" /></label></td> <td><label>two<input name="class1" type="radio" /></label></td> <td><label>none<input name="class1" type="radio" /></label></td> <td><textarea name="comments"></textarea></td> </tr> <tr> <th>class</th> <td><label>one<input name="class2" type="radio" /></label></td> <td><label>two<input name="class2" type="radio" /></label></td> <td><label>none<input name="class2" type="radio" /></label></td> <td><textarea name="comments"></textarea></td> </tr> <tr> <th>class</th> <td><label>one<input name="class3" type="radio" /></label></td> <td><label>two<input name="class3" type="radio" /></label></td> <td><label>none<input name="class3" type="radio" /></label></td> <td><textarea name="comments"></textarea></td> </tr> <tr> <th>class</th> <td><label>one<input name="class4" type="radio" /></label></td> <td><label>two<input name="class4" type="radio" /></label></td> <td><label>none<input name="class4" type="radio" /></label></td> <td><textarea name="comments"></textarea></td> </tr> </tbody> </table>

JS Fiddle demo .

Note, of course, that you still have to adjust the name attribute of the added groups of <input> elements.

References:

• HTML:
• <input> .
• <label> .
• <table> .
• <tbody> .
• <textarea> .
• <tfoot> .
• <thead> .
• JavaScript:
• Arrow function syntax .
• Document.querySelectorAll() .
• Element.closest() .
• Element.querySelector() .
• EventTarget.addEventListener() .
• Node.textContent .
• NodeList.prototype.forEach() .
• String.prototype.toLowerCase() .