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

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