“document.getElementById(div).style.display = none” not working
Question
I'm trying to hide three divs when I click a button, but my js isn't working.
function display() {
document.getElementById("Contentable").style.display = none;
document.getElementById("savebtn").style.display = none;
document.getElementById("stylebar").style.display = none;
}
When I click the button there is an uncaught reference error that says "none" is not defined.
6 answers
solution1
9 2016-08-07 11:08:42
You need to pass "none" as a string.
function display() {
document.getElementById("Contentable").style.display = 'none';
document.getElementById("savebtn").style.display = 'none';
document.getElementById("stylebar").style.display = 'none';
}
Otherwise, it is interpreted as a variable name which is not defined in this case.
solution2
4 ACCPTED 2016-08-07 11:10:21
The none should be in " " and you can use JQuery for this as well.
function display() {
$("#Contentable").hide();
$("#savebtn").hide();
$("#stylebar").hide();
}
solution3
3 2016-08-07 13:19:41
You have to write none in double or single inverted commas "none" , like this
<!DOCTYPE html> <html> <head> <style> #myDIV { width: 500px; height: 500px; background-color: lightblue; } </style> </head> <body> <button onclick="myFunction()">Try it</button> <div id="myDIV"> This is my DIV element. </div> <script> function myFunction() { document.getElementById("myDIV").style.display = "none"; } </script> </body> </html>
solution4
2 2016-08-07 11:10:04
none必须在引号中，否则将被视为变量
element.style.display = 'none';
solution5
0 2020-10-10 09:09:14
Safari renders things differently and uses a UI overlay for dropdowns. You can't just hide them, but you can refresh the options match from array each time. Here I use jQuery to clear a select options each time and create new options:
myFunction(); function myFunction() { //alert("dins"); var select = document.getElementById("selectArticles"); var options = ["NouCreus", "Pic de l'Àliga", "Puigmal", "Finestrelles", "NouFonts", "Núria Estació"]; var i, L = select.options.length - 1; for(i = L; i >= 0; i--) { select.remove(i); } var input, filter, ul, li, a, i, txtValue; input = document.getElementById("inputPatro"); filter = input.value.toUpperCase(); var el = document.createElement("option"); el.textContent = "Vall de Núria"; el.value = "-1"; select.appendChild(el); for(var i = 0; i < options.length; i++) { var opt = options[i]; if (opt.toUpperCase().indexOf(filter) > -1) { var el = document.createElement("option"); el.textContent = opt; el.value = opt; select.appendChild(el); } } }
<input type="text" id="inputPatro" onchange="myFunction()" placeholder="Filtre per nom.." title="Escriu un patró per filtrar les opcionw del desplegable"> <select id="selectArticles"> </select>
solution6
0 2021-06-01 01:22:53
If you wish to make an object disappear but have it still take up space on the HTML page, you can use the following code below:
document.getElementById("Contentable").style.visibility="hidden";
document.getElementById("savebtn").style.visibility="hidden";
document.getElementById("stylebar").style.visibility = "hidden";
Otherwise, to answer your question, copy-paste the code below:
document.getElementById("Contentable").style.display = "none";
document.getElementById("savebtn").style.display = "none";
document.getElementById("stylebar").style.display = "none";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.