JavaScript: Element style.display = 'block' is not working

Question

I have a table.

1. Within my table, the cells have a comment icon.
2. When clicking on the icon, it should disappear and you should be able to see a textarea, with a button to exit it.
3. If you click on that button, the comment icon should show again.

I think the CSS is overriding the JavaScript, because the console is telling me I have the correct element to change the display property on. Here's the HTML, CSS, and JavaScript I'm working with:

 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

For some reason, the CSS was overriding the JavaScript. Would like to know why.

Solved.

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