Unable to toggle div display using Javascript

Question

I have written some vanilla JS in order to hide/display some divs, depending on the value of one of the fields in them.

My problem is that, while hiding them appropriately is working by default, trying to make them appear again, I am having issues as using getElementById is returning nulls.

I've googled and found numerous examples where similar code has worked and I cannot figure out why mine isn't actually working.

The JS I've written is below:

var hidden = false
document.addEventListener("keypress", function(event) {
  if (event.key == '`') {
    if (hidden == false) {
      resultEntries = document.getElementsByClassName('result-row');
      for (i = 0; i < resultEntries.length + 1; i++) {
        var x = document.getElementById('root_cause_' + i)
        if (x != null) {
          var value = x.options[x.selectedIndex].value;
          console.log('value' + value)
          if (value == '') {
            row = document.getElementById('line_' + i)
            row.style.display = 'none';
          }

        }
      }
      hidden = true
    } else {
      resultEntries = document.getElementsByClassName('result-row');
      for (i = 0; i < resultEntries.length + 1; i++) {
        row = document.getElementById('line_' + i) // This is what is returning null
        console.log(row)
        row.style.display = 'block';
      }
      hidden = false
    }
  }
});

Please add relevant HTML and CSS to the snippet I made you

mplungjan
– mplungjan

2022-09-13 14:13:10 +00:00
Commented Sep 13, 2022 at 14:13 — mplungjan
– mplungjan, Commented Sep 13, 2022 at 14:13

mplungjan · Accepted Answer · 2022-09-13 18:49:45Z

2

You overshoot your elements with the + 1 in the for loops

If you need this 1 based (not recommended) it is

for (let i = 1; i <= resultEntries.length; i++)

Also I think you can simplify this. Here is my guess without seeing the HTML

const resultEntries = document.querySelectorAll('.result-row');
document.addEventListener("keypress", function(event) {
  if (event.key !== '`') return;
  resultEntries.forEach((res, i) => {
    let x = document.getElementById('root_cause_' + i)
    if (x) {
      let value = x.value;
      console.log('value' + value)
      document.getElementById('line_' + i).hidden = value === '';
    }
  })
});

edited Sep 13, 2022 at 18:49

answered Sep 13, 2022 at 14:19

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GGeo Over a year ago

It turns out it was something different all-together. I have answered to save people from spending time. Your code was really useful to understand what was wrong and further simplify my code so I am up voting this, thank you.

GGeo · Accepted Answer · 2022-09-13 15:02:00Z

0

Answering to save people from spending more time on this:

The issue was that my loop was starting from 0 while the elements were starting from line_1, meaning I was later on trying to alter the style of a null element.

answered Sep 13, 2022 at 15:02

GGeo

234 bronze badges

Collectives™ on Stack Overflow

Unable to toggle div display using Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related