Whats wrong with me code (dom+onclick+li+display)?

Question

Working

tutorial.onclick = function(){      
    var tutorial = document.getElementById("tutorials-ul");    
    tutorial.style.display = "list-item";    
}

Not working

news.onclick = function(){    
var news = document.getElementById("news-ul");    

if(news.style.display == "none") {     
  news.style.display = "list-item";    
}

else if(news.style.display == "list-item") {    
   news.style.display = "none";
}    
}

Any answer or opinion is accepted.

well this question does not say what is wrong.... working/not working tells us nothing. — epascarello, Jan 09 '18 at 14:44
Any errors in your browser's console? Please share the same. — gurvinder372, Jan 09 '18 at 14:46
The I want to make a dropdown which has a nested li inside and when u click it to display the nested li tags and then if u click again to hide it. There are no errors at the console by the way — kaladont, Jan 09 '18 at 14:51
Well then you’ll have to show us an actual example that reproduces the problem. — CBroe, Jan 09 '18 at 15:08

score 2 · Answer 1 · answered Jan 09 '18 at 14:50

I assume the outer news is a button that has already been assigned to a variable (or the default global via its ID).

The issue is if the element itself does not have a display set in its style attribute, then its initial value will be "" instead of whatever was given in CSS.

Therefore instead of comparing to "none", compare to "".

news.onclick = function() {
  var news = document.getElementById("news-ul");
  if (news.style.display == "") {
    news.style.display = "list-item";
  } else {
    news.style.display = "";
  }
}

#news-ul {
  display: none
}

<button id=news>CLICK FOR NEWS</button>

<ul id="news-ul">
  <li>TEST
</ul>

score 0 · Accepted Answer · answered Jan 12 '18 at 18:03

I figured it out using this stack overflow Get a CSS value with JavaScript

The correct code for showing and hiding the nested uls is

news.onclick = function(){

var news = document.getElementById("news-ul");

function compareDisplayValue(){

var element = document.getElementById("news-ul");

var style = window.getComputedStyle(element);

var display = style.getPropertyValue('display');

if(display == "none"){

 news.style.display = "list-item";

}

else if (display == "list-item"){

 news.style.display = "none";

}

compareDisplayValue();

}

Whats wrong with me code (dom+onclick+li+display)?

2 Answers2