HTML DOM change style of Parent element

Question

function cross() {
  var dik = document.getElementsByName('r1c1')[0].parentNode;
  dik.style.color = "red";
}

<table>
  <tr>
    <td><input type="radio" name="r1c1" value="TRUE"></td>
    <td><input type="radio" name="r1c1" value="FALSE"></td>
  </tr>

  <tr>
    <td><input type="radio" name="r1c2" value="TRUE"></td>
    <td><input type="radio" name="r1c2" value="FALSE"></td>
  </tr>

  <input type="button" name="sbmt" value="CHECK" onclick="cross();">

</table>

When i click the button , I want to change color of td block to red that contains input element <input type="radio" name="r1c1" value="TRUE">

Your code works except `color` applies to text only. Your `td`s have no text node. https://jsfiddle.net/sa355spw/ — Turnip, Nov 10 '17 at 12:43

score 5 · Accepted Answer · answered Nov 10 '17 at 12:44

You have to use property backgroundColor to change the color of td. color is used to change the color of the text

Read Here color vs backgroundColor

<script type="text/javascript">
function cross(){
    var dik = document.getElementsByName('r1c1')[0].parentNode;
    dik.style.backgroundColor = "red";
}
</script>

<table>
<tr>
    <td><input type="radio" name="r1c1" value="TRUE"></td>
    <td><input type="radio" name="r1c1" value="FALSE"></td>
</tr>

<tr>
    <td><input type="radio" name="r1c2" value="TRUE"></td>
    <td><input type="radio" name="r1c2" value="FALSE"></td>
</tr>

<input type="button" name="sbmt" value="CHECK" onclick="cross();">

</table>

score 4 · Answer 2 · answered Nov 10 '17 at 12:43

You need to use backgroundColor rather than color:

<script type="text/javascript">
  function cross() {
    var dik = document.getElementsByName('r1c1')[0].parentNode;
    dik.style.backgroundColor = "red";
  }
</script>

<table>
  <tr>
    <td><input type="radio" name="r1c1" value="TRUE"></td>
    <td><input type="radio" name="r1c1" value="FALSE"></td>
  </tr>

  <tr>
    <td><input type="radio" name="r1c2" value="TRUE"></td>
    <td><input type="radio" name="r1c2" value="FALSE"></td>
  </tr>

  <input type="button" name="sbmt" value="CHECK" onclick="cross();">

</table>

score 3 · Answer 3 · answered Nov 10 '17 at 12:46

try with backgroundColor instead of color

color is change the text of color not background-color

dik.style.backgroundColor = "red";

function cross() {
  var dik = document.getElementsByName('r1c1')[0].parentNode;
  dik.style.backgroundColor = "red";
}

<table>
  <tr>
    <td><input type="radio" name="r1c1" value="TRUE"></td>
    <td><input type="radio" name="r1c1" value="FALSE"></td>
  </tr>

  <tr>
    <td><input type="radio" name="r1c2" value="TRUE"></td>
    <td><input type="radio" name="r1c2" value="FALSE"></td>
  </tr>

  <input type="button" name="sbmt" value="CHECK" onclick="cross();">

</table>

score 1 · Answer 4 · answered Nov 10 '17 at 13:01

1

You need to set the background color of the element to make it go red.

dik.style.background = "red";

answered Nov 10 '17 at 13:01

cdx530

128
8

HTML DOM change style of Parent element

4 Answers4