Hiding image tag-CodePudding

I am trying to get hold of the image tag and make its display to none but in no way can I do this. Its giving me this error:script.js:107 Uncaught TypeError: Cannot read properties of undefined (reading 'display') at view (script.js:107:15) at HTMLImageElement.onclick (index.html:1:1)(error shown below) Kindly help me out.

    const node = document.createElement("li");
    node.innerHTML = `
    <input id="${todo.id}" type="checkbox"/>
    <label for="${todo.id}" ></label>
    <span>${todo.text}</span>
    <div>
    <div >
    <div>Title:${todo.text}</div>
    <div>Description:${todo.description}</div>
    <div>Due-Date:${todo.due_date}</div>
    <div>Due-Time:${todo.due_time}</div>
    </div>
    <img src="i.png"  onclick="view(event)">
    </div>
  `;
function view(event) {
   var x=event.currentTarget.parentElement.querySelector('.hidden').style.display= "block";
   var image=document.querySelector('.image');
   console.log(image);
  if (x.style.display === "none") {///error over here
    image.style.display="none";
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

CodePudding user response：

It looks like you may have some extra code in the first line of the function.

var x = event.currentTarget.parentElement.querySelector('.hidden');

This is all you need to set that variable. The reason you're most likely getting the type error is since this x isn't being set properly.

CodePudding user response：

If you want both x & image to display none in one click.

function view(event) {
  var x=event.currentTarget.parentElement.querySelector('.hidden');
  var image=document.querySelector('.image');
  console.log(image);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
    image.style.display="none";
  };
};