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

时间:2017-03-17 22:21:49

标签: javascript html css dom html-table

我有一张桌子。

  1. 在我的表格中,单元格有一个评论图标。
  2. 当点击图标时,它应该消失,您应该能够看到一个textarea,并有一个按钮退出。
  3. 如果单击该按钮,则应再次显示注释图标。
  4. 我认为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>

1 个答案:

答案 0 :(得分:0)

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