JavaScript:Element style.display='；区块'；它不起作用了

我有一张桌子

在我的表格中，单元格有一个注释图标

当点击图标时，它应该消失，你应该能够看到一个文本区域，并有一个按钮退出它

如果您单击该按钮，注释图标将再次显示 我认为CSS覆盖了JavaScript，因为控制台告诉我我有正确的元素来更改显示属性。以下是我正在使用的HTML、CSS和JavaScript：

函数hideComment（）{
this.parentNode.style.display=“无”；
this.parent.firstChild.style.display=“block”；
}
var exitButton=document.queryselectoral（“.exit按钮”）；
对于（变量i=0；i

.c-na-table textarea，
.c-na-table按钮{
显示：无；
}

此表允许用户在其中一个单元格中留下注释

课程1
课程2
课程3
评论
规格1
规格1
规格1
× 
规格2
规格2
规格2
× 
规格3
规格3
规格3
×

出于某种原因，CSS覆盖了JavaScript。我想知道为什么

解决了

var textAreaDiv1 = document.getElementById('ta-one').style.display='none';
var textAreaDiv1 = document.getElementById('ta-two').style.display='none';
var textAreaDiv1 = document.getElementById('ta-three').style.display='none';

function hideComment(){
  this.parentNode.style.display="none";
  this.parentNode.parentNode.firstChild.style.display="block";
}

var exitButton = document.querySelectorAll(".exit-button");
for (var i = 0; i < exitButton.length; i++){
exitButton[i].addEventListener ('click', hideComment, false);
}

function addComment(){
  this.style.display = 'none';
  this.nextSibling.style.display = "block";
}

var displayComment = document.querySelectorAll(".fa-comment-o");
for (var i = 0; i < displayComment.length; i++){
  displayComment[i].addEventListener('click', addComment, false);
}

var textAreaDiv1=document.getElementById（'ta-one'）.style.display='none'；
var textAreaDiv1=document.getElementById（'ta-two'）.style.display='none'；
var textAreaDiv1=document.getElementById（'ta-three'）.style.display='none'；
函数hideComment（）{
this.parentNode.style.display=“无”；
this.parentNode.parentNode.firstChild.style.display=“block”；
}
var exitButton=document.queryselectoral（“.exit按钮”）；
对于（变量i=0；i

出于某种原因，CSS覆盖了JavaScript。我想知道为什么

解决了

var textAreaDiv1 = document.getElementById('ta-one').style.display='none';
var textAreaDiv1 = document.getElementById('ta-two').style.display='none';
var textAreaDiv1 = document.getElementById('ta-three').style.display='none';

function hideComment(){
  this.parentNode.style.display="none";
  this.parentNode.parentNode.firstChild.style.display="block";
}

var exitButton = document.querySelectorAll(".exit-button");
for (var i = 0; i < exitButton.length; i++){
exitButton[i].addEventListener ('click', hideComment, false);
}

function addComment(){
  this.style.display = 'none';
  this.nextSibling.style.display = "block";
}

var displayComment = document.querySelectorAll(".fa-comment-o");
for (var i = 0; i < displayComment.length; i++){
  displayComment[i].addEventListener('click', addComment, false);
}

var textAreaDiv1=document.getElementById（'ta-one'）.style.display='none'；
var textAreaDiv1=document.getElementById（'ta-two'）.style.display='none'；
var textAreaDiv1=document.getElementById（'ta-three'）.style.display='none'；
函数hideComment（）{
this.parentNode.style.display=“无”；
this.parentNode.parentNode.firstChild.style.display=“block”；
}
var exitButton=document.queryselectoral（“.exit按钮”）；
对于（变量i=0；i

使用

.hide

类可能比将

显示：无

规则添加到这些选择器中更容易/更好，然后让代码添加或删除

hide

类（

this.classList.add（'hide'）

，

this.classList.remove（'hide'）；

等等）使用

.parentNode

或

.parentElement

。在pain JS中，

parent

用于从iframeok中的子页面引用父页面，因此该按钮的父页面消失，这使得该按钮（即此按钮）在默认情况下消失。

this.parent.firstChild.style.display=“block”

因此这是同一父页面，但父页面中的任何内容仍将是

none

。也就是说，如果你真的让

parent

工作了……正如zer00ne所说，一旦你将parent设置为none，它和它的所有子代都将退出流程。不管你把它们设置成什么，它们都不会被看到。好主意，@RobM。看到替代解决方案总是很好的。使用

.hide

类可能比将

显示：无

规则添加到这些选择器中更容易/更好，然后让您的代码添加或删除

hide

类（

this.classList.add（'hide'）

，

this.classList.remove（'hide'）；

），等等）使用

.parentNode

或

.parentElement

。在pain JS中，

parent

用于从iframeok中的子页面引用父页面，因此该按钮的父页面消失，这使得该按钮（即此按钮）在默认情况下消失。

this.parent.firstChild.style.display=“block”

因此这是同一父页面，但父页面中的任何内容仍将是

none

。也就是说，如果你真的让

parent

工作了……正如zer00ne所说，一旦你将parent设置为none，它和它的所有子代都将退出流程。不管你把它们设置成什么，它们都不会被看到。好主意，@RobM。看到替代解决方案总是很好的。它覆盖它是因为[CSS专一性]（.JS影响专一性较低的元素。它覆盖它是因为[CSS专一性]（.JS影响专一性较低的元素）。