function ChangeStatus(){
if (this.parentElement.Read == "Read"){
console.log("Not Read")
this.parentElement.Read.textContent = "Not Read"
}else{
console.log("Read")
this.parentElement.Read.textContent = "Read"
}
}
Whenever I click the button without the textContent part it prints it out in the console, but if I include the textContent, it gives the error: Uncaught TypeError: this.parentElement.Pages is undefined
Here’s the link
I’m trying to make a button that when clicked it changes the text of the Read table data to the opposite of what it is. So if the textContent is read then it gets changed to not read, and vice versa.
>Solution :
You have to select the element that you want to change the text content of.
In your case, you’re trying to reference an element that doesn’t exist.
An easy way to see if you’re referencing the element correctly is to log what you have selected.
Adding the following console logs will show you the available elements on each level:
function ChangeStatus() {
// Remove these logs - start
console.log('this', this);
console.log('this.parentElement', this.parentElement);
console.log('this.parentElement.parentElement', this.parentElement.parentElement);
console.log('this.parentElement.parentElement.querySelector', this.parentElement.parentElement.querySelector('.Read'));
this.parentElement.parentElement.querySelector('.Read').textContent = 'Success';
// Remove these logs - end
if (this.parentElement.parentElement.querySelector('.Read').textContent == "Read"){
console.log("Not Read");
this.parentElement.parentElement.querySelector('.Read').textContent = "Not Read";
} else {
console.log("Read");
this.parentElement.parentElement.querySelector('.Read').textContent = "Read"
}
}
The code should work as expected when you reference the element correctly. This is what you should see in the console of the browser:
Image of the console outputing the logs