Can't set Visibility with JS

Question

I'm trying to toggle the visibility of columns with a click of a button, however the button doesn't seem to be working. Could anyone please help me with this?

The column I'm trying to toggle: {{Kanji}}

function toggleKH() {
  var i;
  var kcol = document.getElementsByClassName("kanjiColumn");
  var hcol = document.getElementsByClassName("hiraganaColumn");
  for (i = 0; i < kcol.length; i++) {
    if (kcol[i].style.visibility === "visible") {
      kcol[i].style.visibility === "hidden";
    } else {
      kcol[i].style.visibility === "visible";
    }
  }
}

.kanjiColumn,
.hiraganaColumn {
  visibility: visible;
}

<button onclick="toggleKH()">x</button>


<td class="kanjiColumn">{{Kanji}}</td>

Styles driven by CSS are not available on per-element `style` objects. — Pointy, Jul 01 '18 at 14:39
initially you need to get the computed style ... there is no inline style at the start and you need to use `=` to set a value — Temani Afif, Jul 01 '18 at 14:43

score 2 · Answer 1 · answered Jul 01 '18 at 14:41

replace ===(equality conditional operator) with =(assignment operator) inside if-else statement as below:

   if (kcol[i].style.visibility === "visible"){
            kcol[i].style.visibility = "hidden";
        } else {
            kcol[i].style.visibility ="visible";
        }

Can't set Visibility with JS

1 Answers1