JavaScript - Function that changes the background of the parent element

Question

JavaScript - Function that changes the background of the parent element

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I'm having trouble making a function. Can you help me? Home After clicking on the checkbox or on the label, it only colors the word, I would like it to also color the background of the div, I tried to make a script like:
var obj = document.getElementById("teste").parent(); obj.style.backgroundColor='#FF0000';
But it did not work, can you help me ??

    function teste(){
       var obj = document.getElementById("categoria").parent();
         obj.style.backgroundColor='#FF0000'; 
    }

input.check-genero:hover + label,
input.check-genero:checked + label{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

/* Tabela conteúdo */
table.tabela-categoria{
    border: solid 15px #fff;
}

.tabela-categoria td{
    border: solid 2px #d3d1d1;
    text-align: center;
    padding: 5px;
    width: 140px;
}

.categoria + label{
    font-family: verdana;
    font-size: 1.2em;
    color: #727176;
    cursor: pointer;
}

.categoria:hover + label,
.categoria:checked + label{
    color: #ffffff;
    background-color:#FF6600;
}

<table class="tabela-categoria">
    <tr>
        <td class="tabela-categoria">
            <input type="checkbox" name="cont1" id="animais" class="categoria">
            <label for="animais" onclick="teste()">ANIMAIS</label>
        </td>
        <td>
            <input type="checkbox" name="cont2" id="artes" class="categoria">
            <label for="artes">ARTES</label>
        </td>
        <td>
            <input type="checkbox" name="cont3" id="beleza" class="categoria">
            <label for="beleza">BELEZA</label>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="cont4" id="business" class="categoria">
            <label for="business">BUSINESS</label>
        </td>
        <td>
            <input type="checkbox" name="cont5" id="causas" class="categoria">
            <label for="causas">CAUSAS</label>
        </td>
        <td>
            <input type="checkbox" name="cont6" id="comedia" class="categoria">
            <label for="comedia">COMEDIA</label>
        </td>
    </tr>
</table>

javascript html5 css

asked by anonymous 17.10.2017 / 17:24

2 answers

1

With document.getElementById ("category") you are looking for an element with category id but it does not exist in your html, you need to search for an element with the category class. For this you can use querySelector because it searches for classes in html, in addition to ids. See the code below, tested it and it worked.

function teste(){
  var obj = document.querySelector(".categoria").parentNode;
  obj.style.backgroundColor='#FF0000'; 
}

The .parent () method also does not work because it's from jQuery, with pure JS use parentNode.

17.10.2017 / 23:49

How does the 'shown.bs.modal' event work? Send image that is on the server as an email attachment

score 1 · Accepted Answer

Pass the event to this function and then e.target.closest('td') to find td .

Example:

function teste(e) {
  var el = e.target.closest('td');
  el.style.backgroundColor = '#FF0000';
}

input.check-genero:hover+label,
input.check-genero:checked+label {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}


/* Tabela conteúdo */

table.tabela-categoria {
  border: solid 15px #fff;
}

.tabela-categoria td {
  border: solid 2px #d3d1d1;
  text-align: center;
  padding: 5px;
  width: 140px;
}

.categoria+label {
  font-family: verdana;
  font-size: 1.2em;
  color: #727176;
  cursor: pointer;
}

.categoria:hover+label,
.categoria:checked+label {
  color: #ffffff;
  background-color: #FF6600;
}

<table class="tabela-categoria" onclick="teste(event)">
  <tr>
    <td class="tabela-categoria">
      <input type="checkbox" name="cont1" id="animais" class="categoria">
      <label for="animais" >ANIMAIS</label>
    </td>
    <td>
      <input type="checkbox" name="cont2" id="artes" class="categoria">
      <label for="artes">ARTES</label>
    </td>
    <td>
      <input type="checkbox" name="cont3" id="beleza" class="categoria">
      <label for="beleza">BELEZA</label>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="cont4" id="business" class="categoria">
      <label for="business">BUSINESS</label>
    </td>
    <td>
      <input type="checkbox" name="cont5" id="causas" class="categoria">
      <label for="causas">CAUSAS</label>
    </td>
    <td>
      <input type="checkbox" name="cont6" id="comedia" class="categoria">
      <label for="comedia">COMEDIA</label>
    </td>
  </tr>
</table>