Searching for elementsbyid where ID is set from a dataset

Question

I am trying to get items to be visible/invisible based on an onclick function being called however I am getting "Unhandled Rejection (TypeError): Cannot read property 'style' of null"

My code reads as follows:

      <div>
        {output.map((group) => (
          <div className="sidebar">
          <div className="groupbutton" onClick={item_open({group})}>{group}</div>
          <div>
            {this.state.items.filter(item =>  item.GroupDesc === group).map((items) => (
            <div className="itembutton" style={{display:'none'}} id={group}>{items.TypeDesc}</div>))}
          </div>
        </div>))}
      </div>

with a function

function item_open(group) {
  document.getElementById(group).style.display = "block";
}

I believe these should:

-give all items in the group an id of the group name

-the function should call all of those items with getElementById

-they should then all get the display: "block" attribute

Can anyone see why this might not work?

change onClick={item_open({group})} to onClick={item_open(group)} and try — Shivanshu Gupta, Dec 14 '20 at 19:19
you are attempting to set the display property to an invalid value. please console.log(group) inside item_open() function — Abu Sufian, Dec 14 '20 at 19:21
IDs must be unique to the document; you can't have more than one item with the same id. — Heretic Monkey, Dec 14 '20 at 19:24
Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Heretic Monkey, Dec 14 '20 at 19:24
Cheers for all the help so far, Shivanshu, that didn't fix the problem, but is appreciated nonetheless. Abu Sufian the console.log(group) does display the identifier correctly. Heretic monkey, that does answer my question but I can't seem to add any of the onload elements, do you know how i might apply it? I can't work out why it is firing on load anyway, surely onclick counts as event delegation that should hold til the dom is fully loaded? — TSto, Dec 14 '20 at 22:02

score 1 · Answer 1 · answered Dec 14 '20 at 19:21

1

just this will work: onClick={item_open(group)} since you already put the braces, anything you put inside it will be interpreted as javascript code

answered Dec 14 '20 at 19:21

Gustavo Freire

77
7

Searching for elementsbyid where ID is set from a dataset

1 Answers1