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); 
}