OnClick doesn't work well with multiple classes

Question

I'm making a sudoku game, and when I click on an input for introducing a number I want the box, column, and row where is the input you clicked to change the color (the hover works fine). But I don't why it only works with some inputs, there are some that when clicked only highlight the row and the box but not the column.

window.onload = function() {
  function hoverByClass(classname, colorover, colorover2, colorout = "transparent") {
    let t1 = document.getElementsByClassName(classname);
    for (let i = 0; i < t1.length; i++) {
      t1[i].onmouseover = function() {
        for (let k = 0; k < t1.length; k++) {
          t1[k].style.backgroundColor = colorover;
        }
      }
      t1[i].onmouseout = function() {
        for (let k = 0; k < t1.length; k++) {
          t1[k].style.backgroundColor = colorout;
        }
      }
      t1[i].onclick = function() {
        for (let j = 0; j < t1.length; j++) {
          console.log(j);
          console.log(t1);
          console.log(t1[j]);
          t1[j].style.backgroundColor = colorover2;
        }
      }
    }
  }
  for (let index = 1; index <= 9; index++) {
    hoverByClass("fila" + index, "#add8e6", "#8a2be2");
    hoverByClass("t" + index, "#add8e6", "#8a2be2");
    hoverByClass("columna" + index, "#add8e6", "#8a2be2");
  }
}

* {
  background-color: lemonchiffon;
}

.tG {
  border-collapse: collapse;
  text-align: center;
}

input {
  font-size: 25px;
  width: 30px;
  height: 30px;
  TEXT-ALIGN: center;
  border: none;
}

.normal {
  border: gray 0.1px solid;
}

.abajo {
  border: gray 0.1px solid;
  border-bottom: blueviolet 2px solid;
}

.derecha {
  border: gray 0.1px solid;
  border-right: blueviolet 2px solid;
}

.derbajo {
  border: gray 0.1px solid;
  border-right: blueviolet 2px solid;
  border-bottom: blueviolet 2px solid;
}

<body>
  <table class="tG" align="center">
    <tr class="fila1">
      <td class="normal columna1 t1"><input name="sdk[]" size="1" maxlength="1" class="t1"></td>
      <td class="normal columna2 t1"><input name="sdk[]" size="1" maxlength="1" class="t1"></td>
      <td class="derecha columna3 t1"><input name="sdk[]" size="1" maxlength="1" class="t1"></td>
      <td class="normal columna4 t2"><input name="sdk[]" size="1" maxlength="1" class="t2"></td>
      <td class="normal columna5 t2"><input name="sdk[]" size="1" maxlength="1" class="t2"></td>
      <td class="derecha columna6 t2"><input name="sdk[]" size="1" maxlength="1" class="t2"></td>
      <td class="normal columna7 t3"><input name="sdk[]" size="1" maxlength="1" class="t3"></td>
      <td class="normal columna8 t3"><input name="sdk[]" size="1" maxlength="1" class="t3"></td>
      <td class="normal columna9 t3"><input name="sdk[]" size="1" maxlength="1" class="t3"></td>
    </tr>
    <tr class="fila2">
      <td class="normal columna1 t1"><input name="sdk[]" size="1" maxlength="1" class="t1"></td>
      <td class="normal columna2 t1"><input name="sdk[]" size="1" maxlength="1" class="t1"></td>
      <td class="derecha columna3 t1"><input name="sdk[]" size="1" maxlength="1" class="t1"></td>
      <td class="normal columna4 t2"><input name="sdk[]" size="1" maxlength="1" class="t2"></td>
      <td class="normal columna5 t2"><input name="sdk[]" size="1" maxlength="1" class="t2"></td>
      <td class="derecha columna6 t2"><input name="sdk[]" size="1" maxlength="1" class="t2"></td>
      <td class="normal columna7 t3"><input name="sdk[]" size="1" maxlength="1" class="t3"></td>
      <td class="normal columna8 t3"><input name="sdk[]" size="1" maxlength="1" class="t3"></td>
      <td class="normal columna9 t3"><input name="sdk[]" size="1" maxlength="1" class="t3"></td>
    </tr>
    <tr class="fila3">
      <td class="abajo columna1 t1"><input name="sdk[]" size="1" maxlength="1" class="t1"></td>
      <td class="abajo columna2 t1"><input name="sdk[]" size="1" maxlength="1" class="t1"></td>
      <td class="derbajo columna3 t1"><input name="sdk[]" size="1" maxlength="1" class="t1"></td>
      <td class="abajo columna4 t2"><input name="sdk[]" size="1" maxlength="1" class="t2"></td>
      <td class="abajo columna5 t2"><input name="sdk[]" size="1" maxlength="1" class="t2"></td>
      <td class="derbajo columna6 t2"><input name="sdk[]" size="1" maxlength="1" class="t2"></td>
      <td class="abajo columna7 t3"><input name="sdk[]" size="1" maxlength="1" class="t3"></td>
      <td class="abajo columna8 t3"><input name="sdk[]" size="1" maxlength="1" class="t3"></td>
      <td class="abajo columna9 t3"><input name="sdk[]" size="1" maxlength="1" class="t3"></td>
    </tr>
    <tr class="fila4">
      <td class="normal columna1 t4"><input name="sdk[]" size="1" maxlength="1" class="t4"></td>
      <td class="normal columna2 t4"><input name="sdk[]" size="1" maxlength="1" class="t4"></td>
      <td class="derecha columna3 t4"><input name="sdk[]" size="1" maxlength="1" class="t4"></td>
      <td class="normal columna4 t5"><input name="sdk[]" size="1" maxlength="1" class="t5"></td>
      <td class="normal columna5 t5"><input name="sdk[]" size="1" maxlength="1" class="t5"></td>
      <td class="derecha columna6 t5"><input name="sdk[]" size="1" maxlength="1" class="t5"></td>
      <td class="normal columna7 t6"><input name="sdk[]" size="1" maxlength="1" class="t6"></td>
      <td class="normal columna8 t6"><input name="sdk[]" size="1" maxlength="1" class="t6"></td>
      <td class="normal columna9 t6"><input name="sdk[]" size="1" maxlength="1" class="t6"></td>
    </tr>
    <tr class="fila5">
      <td class="normal columna1 t4"><input name="sdk[]" size="1" maxlength="1" class="t4"></td>
      <td class="normal columna2 t4"><input name="sdk[]" size="1" maxlength="1" class="t4"></td>
      <td class="derecha columna3 t4"><input name="sdk[]" size="1" maxlength="1" class="t4"></td>
      <td class="normal columna4 t5"><input name="sdk[]" size="1" maxlength="1" class="t5"></td>
      <td class="normal columna5 t5"><input name="sdk[]" size="1" maxlength="1" class="t5"></td>
      <td class="derecha columna6 t5"><input name="sdk[]" size="1" maxlength="1" class="t5"></td>
      <td class="normal columna7 t6"><input name="sdk[]" size="1" maxlength="1" class="t6"></td>
      <td class="normal columna8 t6"><input name="sdk[]" size="1" maxlength="1" class="t6"></td>
      <td class="normal columna9 t6"><input name="sdk[]" size="1" maxlength="1" class="t6"></td>
    </tr>
    <tr class="fila6">
      <td class="abajo columna1 t4"><input name="sdk[]" size="1" maxlength="1" class="t4"></td>
      <td class="abajo columna2 t4"><input name="sdk[]" size="1" maxlength="1" class="t4"></td>
      <td class="derbajo columna3 t4"><input name="sdk[]" size="1" maxlength="1" class="t4"></td>
      <td class="abajo columna4 t5"><input name="sdk[]" size="1" maxlength="1" class="t5"></td>
      <td class="abajo columna5 t5"><input name="sdk[]" size="1" maxlength="1" class="t5"></td>
      <td class="derbajo columna6 t5"><input name="sdk[]" size="1" maxlength="1" class="t5"></td>
      <td class="abajo columna7 t6"><input name="sdk[]" size="1" maxlength="1" class="t6"></td>
      <td class="abajo columna8 t6"><input name="sdk[]" size="1" maxlength="1" class="t6"></td>
      <td class="abajo columna9 t6"><input name="sdk[]" size="1" maxlength="1" class="t6"></td>
    </tr>
    <tr class="fila7">
      <td class="normal columna1 t7"><input name="sdk[]" size="1" maxlength="1" class="t7"></td>
      <td class="normal columna2 t7"><input name="sdk[]" size="1" maxlength="1" class="t7"></td>
      <td class="derecha columna3 t7"><input name="sdk[]" size="1" maxlength="1" class="t7"></td>
      <td class="normal columna4 t8"><input name="sdk[]" size="1" maxlength="1" class="t8"></td>
      <td class="normal columna5 t8"><input name="sdk[]" size="1" maxlength="1" class="t8"></td>
      <td class="derecha columna6 t8"><input name="sdk[]" size="1" maxlength="1" class="t8"></td>
      <td class="normal columna7 t9"><input name="sdk[]" size="1" maxlength="1" class="t9"></td>
      <td class="normal columna8 t9"><input name="sdk[]" size="1" maxlength="1" class="t9"></td>
      <td class="normal columna9 t9"><input name="sdk[]" size="1" maxlength="1" class="t9"></td>
    </tr>
    <tr class="fila8">
      <td class="normal columna1 t7"><input name="sdk[]" size="1" maxlength="1" class="t7"></td>
      <td class="normal columna2 t7"><input name="sdk[]" size="1" maxlength="1" class="t7"></td>
      <td class="derecha columna3 t7"><input name="sdk[]" size="1" maxlength="1" class="t7"></td>
      <td class="normal columna4 t8"><input name="sdk[]" size="1" maxlength="1" class="t8"></td>
      <td class="normal columna5 t8"><input name="sdk[]" size="1" maxlength="1" class="t8"></td>
      <td class="derecha columna6 t8"><input name="sdk[]" size="1" maxlength="1" class="t8"></td>
      <td class="normal columna7 t9"><input name="sdk[]" size="1" maxlength="1" class="t9"></td>
      <td class="normal columna8 t9"><input name="sdk[]" size="1" maxlength="1" class="t9"></td>
      <td class="normal columna9 t9"><input name="sdk[]" size="1" maxlength="1" class="t9"></td>
    </tr>
    <tr class="fila9">
      <td class="abajo columna1 t7"><input name="sdk[]" size="1" maxlength="1" class="t7"></td>
      <td class="abajo columna2 t7"><input name="sdk[]" size="1" maxlength="1" class="t7"></td>
      <td class="derbajo columna3 t7"><input name="sdk[]" size="1" maxlength="1" class="t7"></td>
      <td class="abajo columna4 t8"><input name="sdk[]" size="1" maxlength="1" class="t8"></td>
      <td class="abajo columna5 t8"><input name="sdk[]" size="1" maxlength="1" class="t8"></td>
      <td class="derbajo columna6 t8"><input name="sdk[]" size="1" maxlength="1" class="t8"></td>
      <td class="abajo columna7 t9"><input name="sdk[]" size="1" maxlength="1" class="t9"></td>
      <td class="abajo columna8 t9"><input name="sdk[]" size="1" maxlength="1" class="t9"></td>
      <td class="abajo columna9 t9"><input name="sdk[]" size="1" maxlength="1" class="t9"></td>
    </tr>
  </table>
</body>

This is how is intended to work

But there are some that don't work fine (it only disappears columns)

Use [event delegation](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of adding several event listeners — it’s more maintainable and applies to dynamically added elements. See [the tag info](/tags/event-delegation/info) and [this Q&A](/a/55452921/4642212). — Sebastian Simon, Nov 13 '22 at 18:14

Jerry · Answer 1 · 2023-03-17T14:12:46.360

 let box = document.querySelectorAll(".fila");
    
          for (let i = 0; i < box.length; i++) {
            // mouse over
            box[i].onmouseover = function (event) {
              // if the target node name is input
              if (event.target.nodeName == "INPUT") {
                myFunction("#8a2be2");
              }
            };
            // mouse out
            box[i].onmouseout = function (event) {
              myFunction("lemonchiffon");
            };
          }
    
          // handler function
          function myFunction(bgColor) {
            let selectedColumn = event.target.parentElement.classList[1];
            let locatedColumn = event.target.parentElement;
            //
            for (let z = 0; z < locatedColumn.parentElement.children.length; z++) {
              locatedColumn.parentElement.children[z].children[0].style.background =
                bgColor;
            }
            //
            let tableColumn = document.querySelectorAll("." + selectedColumn);
            for (let j = 0; j < tableColumn.length; j++) {
              tableColumn[j].children[0].style.backgroundColor = bgColor;
            }
    
            // making square colorful
            let fullBox = document.querySelectorAll(
              "." + event.target.classList[0]
            );
            for (let b = 0; b < fullBox.length; b++) {
              fullBox[b].style.backgroundColor = bgColor;
            }
          }

* {
          background-color: lemonchiffon;
        }
    
        .tG {
          border-collapse: collapse;
          text-align: center;
        }
    
        input {
          font-size: 25px;
          width: 30px;
          height: 30px;
          text-align: center;
          border: none;
        }
    
        .normal {
          border: gray 0.1px solid;
        }
    
        .abajo {
          border: gray 0.1px solid;
          border-bottom: blueviolet 2px solid;
        }
    
        .derecha {
          border: gray 0.1px solid;
          border-right: blueviolet 2px solid;
        }
    
        .derbajo {
          border: gray 0.1px solid;
          border-right: blueviolet 2px solid;
          border-bottom: blueviolet 2px solid;
        }

Here you can try this logic : 

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <table class="tG" align="center">
          <tr class="fila fila1">
            <td class="normal columna1 t1">
              <input name="sdk[]" size="1" maxlength="1" class="t1" />
            </td>
            <td class="normal columna2 t1">
              <input name="sdk[]" size="1" maxlength="1" class="t1" />
            </td>
            <td class="derecha columna3 t1">
              <input name="sdk[]" size="1" maxlength="1" class="t1" />
            </td>
            <td class="normal columna4 t2">
              <input name="sdk[]" size="1" maxlength="1" class="t2" />
            </td>
            <td class="normal columna5 t2">
              <input name="sdk[]" size="1" maxlength="1" class="t2" />
            </td>
            <td class="derecha columna6 t2">
              <input name="sdk[]" size="1" maxlength="1" class="t2" />
            </td>
            <td class="normal columna7 t3">
              <input name="sdk[]" size="1" maxlength="1" class="t3" />
            </td>
            <td class="normal columna8 t3">
              <input name="sdk[]" size="1" maxlength="1" class="t3" />
            </td>
            <td class="normal columna9 t3">
              <input name="sdk[]" size="1" maxlength="1" class="t3" />
            </td>
          </tr>
          <tr class="fila fila2">
            <td class="normal columna1 t1">
              <input name="sdk[]" size="1" maxlength="1" class="t1" />
            </td>
            <td class="normal columna2 t1">
              <input name="sdk[]" size="1" maxlength="1" class="t1" />
            </td>
            <td class="derecha columna3 t1">
              <input name="sdk[]" size="1" maxlength="1" class="t1" />
            </td>
            <td class="normal columna4 t2">
              <input name="sdk[]" size="1" maxlength="1" class="t2" />
            </td>
            <td class="normal columna5 t2">
              <input name="sdk[]" size="1" maxlength="1" class="t2" />
            </td>
            <td class="derecha columna6 t2">
              <input name="sdk[]" size="1" maxlength="1" class="t2" />
            </td>
            <td class="normal columna7 t3">
              <input name="sdk[]" size="1" maxlength="1" class="t3" />
            </td>
            <td class="normal columna8 t3">
              <input name="sdk[]" size="1" maxlength="1" class="t3" />
            </td>
            <td class="normal columna9 t3">
              <input name="sdk[]" size="1" maxlength="1" class="t3" />
            </td>
          </tr>
          <tr class="fila fila3">
            <td class="abajo columna1 t1">
              <input name="sdk[]" size="1" maxlength="1" class="t1" />
            </td>
            <td class="abajo columna2 t1">
              <input name="sdk[]" size="1" maxlength="1" class="t1" />
            </td>
            <td class="derbajo columna3 t1">
              <input name="sdk[]" size="1" maxlength="1" class="t1" />
            </td>
            <td class="abajo columna4 t2">
              <input name="sdk[]" size="1" maxlength="1" class="t2" />
            </td>
            <td class="abajo columna5 t2">
              <input name="sdk[]" size="1" maxlength="1" class="t2" />
            </td>
            <td class="derbajo columna6 t2">
              <input name="sdk[]" size="1" maxlength="1" class="t2" />
            </td>
            <td class="abajo columna7 t3">
              <input name="sdk[]" size="1" maxlength="1" class="t3" />
            </td>
            <td class="abajo columna8 t3">
              <input name="sdk[]" size="1" maxlength="1" class="t3" />
            </td>
            <td class="abajo columna9 t3">
              <input name="sdk[]" size="1" maxlength="1" class="t3" />
            </td>
          </tr>
          <tr class="fila fila4">
            <td class="normal columna1 t4">
              <input name="sdk[]" size="1" maxlength="1" class="t4" />
            </td>
            <td class="normal columna2 t4">
              <input name="sdk[]" size="1" maxlength="1" class="t4" />
            </td>
            <td class="derecha columna3 t4">
              <input name="sdk[]" size="1" maxlength="1" class="t4" />
            </td>
            <td class="normal columna4 t5">
              <input name="sdk[]" size="1" maxlength="1" class="t5" />
            </td>
            <td class="normal columna5 t5">
              <input name="sdk[]" size="1" maxlength="1" class="t5" />
            </td>
            <td class="derecha columna6 t5">
              <input name="sdk[]" size="1" maxlength="1" class="t5" />
            </td>
            <td class="normal columna7 t6">
              <input name="sdk[]" size="1" maxlength="1" class="t6" />
            </td>
            <td class="normal columna8 t6">
              <input name="sdk[]" size="1" maxlength="1" class="t6" />
            </td>
            <td class="normal columna9 t6">
              <input name="sdk[]" size="1" maxlength="1" class="t6" />
            </td>
          </tr>
          <tr class="fila fila5">
            <td class="normal columna1 t4">
              <input name="sdk[]" size="1" maxlength="1" class="t4" />
            </td>
            <td class="normal columna2 t4">
              <input name="sdk[]" size="1" maxlength="1" class="t4" />
            </td>
            <td class="derecha columna3 t4">
              <input name="sdk[]" size="1" maxlength="1" class="t4" />
            </td>
            <td class="normal columna4 t5">
              <input name="sdk[]" size="1" maxlength="1" class="t5" />
            </td>
            <td class="normal columna5 t5">
              <input name="sdk[]" size="1" maxlength="1" class="t5" />
            </td>
            <td class="derecha columna6 t5">
              <input name="sdk[]" size="1" maxlength="1" class="t5" />
            </td>
            <td class="normal columna7 t6">
              <input name="sdk[]" size="1" maxlength="1" class="t6" />
            </td>
            <td class="normal columna8 t6">
              <input name="sdk[]" size="1" maxlength="1" class="t6" />
            </td>
            <td class="normal columna9 t6">
              <input name="sdk[]" size="1" maxlength="1" class="t6" />
            </td>
          </tr>
          <tr class="fila fila6">
            <td class="abajo columna1 t4">
              <input name="sdk[]" size="1" maxlength="1" class="t4" />
            </td>
            <td class="abajo columna2 t4">
              <input name="sdk[]" size="1" maxlength="1" class="t4" />
            </td>
            <td class="derbajo columna3 t4">
              <input name="sdk[]" size="1" maxlength="1" class="t4" />
            </td>
            <td class="abajo columna4 t5">
              <input name="sdk[]" size="1" maxlength="1" class="t5" />
            </td>
            <td class="abajo columna5 t5">
              <input name="sdk[]" size="1" maxlength="1" class="t5" />
            </td>
            <td class="derbajo columna6 t5">
              <input name="sdk[]" size="1" maxlength="1" class="t5" />
            </td>
            <td class="abajo columna7 t6">
              <input name="sdk[]" size="1" maxlength="1" class="t6" />
            </td>
            <td class="abajo columna8 t6">
              <input name="sdk[]" size="1" maxlength="1" class="t6" />
            </td>
            <td class="abajo columna9 t6">
              <input name="sdk[]" size="1" maxlength="1" class="t6" />
            </td>
          </tr>
          <tr class="fila fila7">
            <td class="normal columna1 t7">
              <input name="sdk[]" size="1" maxlength="1" class="t7" />
            </td>
            <td class="normal columna2 t7">
              <input name="sdk[]" size="1" maxlength="1" class="t7" />
            </td>
            <td class="derecha columna3 t7">
              <input name="sdk[]" size="1" maxlength="1" class="t7" />
            </td>
            <td class="normal columna4 t8">
              <input name="sdk[]" size="1" maxlength="1" class="t8" />
            </td>
            <td class="normal columna5 t8">
              <input name="sdk[]" size="1" maxlength="1" class="t8" />
            </td>
            <td class="derecha columna6 t8">
              <input name="sdk[]" size="1" maxlength="1" class="t8" />
            </td>
            <td class="normal columna7 t9">
              <input name="sdk[]" size="1" maxlength="1" class="t9" />
            </td>
            <td class="normal columna8 t9">
              <input name="sdk[]" size="1" maxlength="1" class="t9" />
            </td>
            <td class="normal columna9 t9">
              <input name="sdk[]" size="1" maxlength="1" class="t9" />
            </td>
          </tr>
          <tr class="fila fila8">
            <td class="normal columna1 t7">
              <input name="sdk[]" size="1" maxlength="1" class="t7" />
            </td>
            <td class="normal columna2 t7">
              <input name="sdk[]" size="1" maxlength="1" class="t7" />
            </td>
            <td class="derecha columna3 t7">
              <input name="sdk[]" size="1" maxlength="1" class="t7" />
            </td>
            <td class="normal columna4 t8">
              <input name="sdk[]" size="1" maxlength="1" class="t8" />
            </td>
            <td class="normal columna5 t8">
              <input name="sdk[]" size="1" maxlength="1" class="t8" />
            </td>
            <td class="derecha columna6 t8">
              <input name="sdk[]" size="1" maxlength="1" class="t8" />
            </td>
            <td class="normal columna7 t9">
              <input name="sdk[]" size="1" maxlength="1" class="t9" />
            </td>
            <td class="normal columna8 t9">
              <input name="sdk[]" size="1" maxlength="1" class="t9" />
            </td>
            <td class="normal columna9 t9">
              <input name="sdk[]" size="1" maxlength="1" class="t9" />
            </td>
          </tr>
          <tr class="fila fila9">
            <td class="abajo columna1 t7">
              <input name="sdk[]" size="1" maxlength="1" class="t7" />
            </td>
            <td class="abajo columna2 t7">
              <input name="sdk[]" size="1" maxlength="1" class="t7" />
            </td>
            <td class="derbajo columna3 t7">
              <input name="sdk[]" size="1" maxlength="1" class="t7" />
            </td>
            <td class="abajo columna4 t8">
              <input name="sdk[]" size="1" maxlength="1" class="t8" />
            </td>
            <td class="abajo columna5 t8">
              <input name="sdk[]" size="1" maxlength="1" class="t8" />
            </td>
            <td class="derbajo columna6 t8">
              <input name="sdk[]" size="1" maxlength="1" class="t8" />
            </td>
            <td class="abajo columna7 t9">
              <input name="sdk[]" size="1" maxlength="1" class="t9" />
            </td>
            <td class="abajo columna8 t9">
              <input name="sdk[]" size="1" maxlength="1" class="t9" />
            </td>
            <td class="abajo columna9 t9">
              <input name="sdk[]" size="1" maxlength="1" class="t9" />
            </td>
          </tr>
        </table>
      </body>
    </html>

I've found another way to make it work but still thank you very much Now I have another different problem — Martí Rodríguez María, Nov 14 '22 at 12:46

OnClick doesn't work well with multiple classes

1 Answers1