JavaScript：元素style.display ='块'不起作用

Question

我有一张桌子。

1. 在我的表格中，单元格有一个注释图标。
2. 点击图标时，它应该消失，你应该能够看到一个textarea，用一个按钮退出它。
3. 如果你点击那个按钮，评论图标应该再次显示。

我认为CSS重写JavaScript，因为控制台告诉我我有正确的元素来更改显示属性。这里的HTML，CSS和JavaScript我的工作：

function hideComment(){ 
 
    this.parentNode.style.display="none"; 
 
    this.parent.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); 
 
}

.c-na-table textarea, 
 
.c-na-table button{ 
 
    display: none; 
 
}

<p>This table enables users to leave a comment in one of the cells.</p> 
 

 
<div class="table-three"> 
 
<table class="c-na-table"> 
 
    <thead class="th-head"> 
 
    <tr> 
 
     <td class="td-input"></td> 
 
     <td class="column-a-0c no-lite">Course 1</td> 
 
     <td class="column-b-0c no-lite">Course 2</td> 
 
     <td class="column-c-0c no-lite">Course 3</td> 
 
     <td class-"column-d">Comments &nbsp;&nbsp;</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="row-a"> 
 
     <td class="td-input"><input type="checkbox"></input></td> 
 
     <td class="column-a-3">Specification 1</td> 
 
     <td class="column-b-3">Specification 1</td> 
 
     <td class="column-c-3">Specification 1</td> 
 
     <td class="column-d"><i class="fa fa-comment-o" aria-hidden="true"></i><div id="ta-one"> 
 
    <button class="exit-button">&#215;</button> 
 
<textarea row="4" col="20"></textarea> 
 
</div></td> 
 
    </tr> 
 
    <tr class="row-b"> 
 
     <td class="td-input"><input type="checkbox"></input></td> 
 
     <td class="column-a-3">Specification 2</td> 
 
     <td class="column-b-3">Specification 2</td> 
 
     <td class="column-c-3">Specification 2</td> 
 
     <td class="column-d"><i class="fa fa-comment-o" aria-hidden="true"></i><div id="ta-two"> 
 
    <button class="exit-button">&#215;</button> 
 
<textarea row="4" col="20"></textarea> 
 
</div></td> 
 
    </tr> 
 
    <tr class="row-c"> 
 
     <td class="td-input"><input type="checkbox"></input></td> 
 
     <td class="column-a-3">Specification 3</td> 
 
     <td class="column-b-3">Specification 3</td> 
 
     <td class="column-c-3">Specification 3</td> 
 
     <td class="column-d"><i class="fa fa-comment-o" aria-hidden="true"></i><div id="ta-three"> 
 
    <button class="exit-button">&#215;</button> 
 
    <textarea row="4"col="20"></textarea> 
 
</div></td> 
 
    </tr> 
 
    </tbody> 
 
    <tfoot class="tf-foot"> 
 
    <tr></tr> 
 
    </tfoot> 
 
</table> 
 

 
</div>

Answer 1

出于某种原因，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); 
}