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

Question

我有一张 table 。

1. 在我的表格中，单元格有一个评论图标。
2. 点击图标时，它应该消失，您应该能够看到一个文本区域，并有一个退出按钮。
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);
}