This condition is not working. When I click, it should hide all li elements and when I click again it should show all the li elements that are hidden but its not working
hide.addEventListener("click", function() {
Array.from(list.children).forEach(function(k){
if(k.style.display === "block") {
k.style.display = "none";
hide.textContent = "Show";
list.style.backgroundColor = "rgba(0, 0, 0, 33%)";
list.style.borderRadius = "8px";
document.querySelector(".hidden").style.display = "block";
input.setAttribute("disabled", "disabled");
}
else if (k.style.display === "none") {
hide.textContent = "Hide";
k.style.display = "block";
list.style.backgroundColor == "transparent";
list.style.borderRadius = "";
document.querySelector(".hidden").style.display = "none";
input.removeAttribute("disabled");
}
else {
};
})
});
Array.from(list.children).forEach(function(k){
if(k.style.display == "block") {
k.style.display = "none";
hide.textContent = "Show";
list.style.backgroundColor = "rgba(0, 0, 0, 33%)";
list.style.borderRadius = "8px";
document.querySelector(".hidden").style.display = "block";
input.setAttribute("disabled", "disabled");
}
else if (k.style.display == "none") {
hide.textContent = "Hide";
k.style.display = "block";
list.style.backgroundColor == "transparent";
list.style.borderRadius = "";
document.querySelector(".hidden").style.display = "none";
input.removeAttribute("disabled");
}
else {
};
});
When you're trying to compare two values remember to use == or === instead of =. When you use = it means your DECLARING a value for something, whereas when you use == or === it means your COMPARING two values of something. Use === only when you want to be truly precise, for example 1 == '1' would be true, whereas 1 === '1' would be false as one is an integer and one is a string so they are not precisely the same.
Also the nice thing about JQuery is that you can use lots of its inbuilt functions to toggle certain things, in this case you could use .toggleClass() and have the same effect:
Array.from(list.children).forEach(function(k){
k.toggleClass('hidden');
});
And then in your CSS you could have:
.hidden {
display = 'block';
}
Related
I've been trying to create a mobile navigation menu with HTML and javascript.
So I created four links, a checkbox and a function that can hide the links when the checkbox is unchecked and unhide them when it is checked, it works fine, the only problem is I do not want the function to execute if the screen width is more than 516px.
Here's what I've got so far ("toggle" is the ID of the checkbox and "links" is the ID of the links):
function togglemenu() {
var toggle = document.getElementById("toggle");
var links = document.getElementById("links");
if (toggle.checked == true){
links.style.display = "block";
}
if (toggle.checked == false){
links.style.display = "none";
}
}
Here is my updated code:
function togglemenu() {
var toggle = document.getElementById("toggle");
var links = document.getElementById("links");
if (document.body.clientWidth <= 516) {
if (toggle.checked == true){
links.style.display = "block";
}
if (toggle.checked == false){
links.style.display = "none";
}
}
It still isn't working.
Here is the whole thing in jsfiddle...
You can use window.matchMedia(). See Receiving query notifications
if (window.matchMedia("(min-width: 516px)").matches) {
/* The viewport is at least 516 pixels wide */
} else {
/* The viewport is less than 516 pixels wide */
// do stuff
}
The if statement checks the document.body.clientWidth as recommended here: https://developer.mozilla.org/en-US/docs/Web/API/Document/width
document.querySelector('#test').addEventListener('click', test);
function test(event) {
let target = document.querySelector('#content');
target.innerHTML = `screen width ${document.body.clientWidth}px`;
if(document.body.clientWidth <= 516) {
target.innerHTML = Date.now().toString();
}
}
<button id="test">Test</button>
<div id="content"></div>
you can use below code to add a condition in your code.
if (window.screen.width > 516 ){
// do stuff
}
Here is link for more info.
use $(window).width() in if statement to get the width of the user window, then check if it is greater than 516px
JQUERY Code:
function togglemenu() {
var toggle = document.getElementById("toggle");
var links = document.getElementById("links");
if ($(window).width() > 516) {
//if width is greater than 516px
if (toggle.checked == true) {
links.style.display = "block";
}
if (toggle.checked == false) {
links.style.display = "none";
}
}
}
JS Code:
document.body.clientWidth use this instead for pure js, you're missing an end bracket } in function togglemenu()
function togglemenu() {
alert(document.body.clientWidth);//to check the current client width
if (document.body.clientWidth <= 516) {
alert("working");//just to check if it really works
var toggle = document.getElementById("toggle");
var links = document.getElementById("links");
if (toggle.checked == true) {
links.style.display = "block";
}
if (toggle.checked == false) {
links.style.display = "none";
}
}
}
i want to toggle two menus offered by two buttons.the issue is when i click on button one, it shows the menu bound with button one but when i click the other, it shows both instead of hiding the first one and vice versa, on my login page. The menus are identified by the ids of; 'reqpwd' and 'signup' in html / JS. What is worng? also suggest improvement in code if possible. My JS code:
<script>
window.onload = function() {
document.getElementById('reqpwd').style.display = 'none';
document.getElementById('signup').style.display = 'none';
};
function chk(elm) {
var signup_ = signup.id;
var reqpwd_ = reqpwd.id;
elm_ = elm.id;
if (elm_ == reqpwd_){
hide(signup_);
show(reqpwd_);
}
if (elm_== signup_){
hide(reqpwd_);
show(signup_);
}
};
function show(abc) {
var menuBox = document.getElementById(abc);
if(menuBox.style.display == "none") { // if is menuBox displayed, hide it
menuBox.style.display = "block";
} };
function hide(abc){ // if is menuBox hidden, display it
var menuBox = document.getElementById(abc);
if(menuBox.style.display == "block"){
menuBox.style.display == "none";
}
};
</script>
Instead of menuBox.style.display == "none"; try using menuBox.style.visibility== "hidden";
Edit:
I have changed a few things in your code. Didn't make a whole lot of sense to me the way you're setting the styles on load (missing HTML), so I had to use IDs that made sense to me.
Edit:
Ok, my bad. I updated the code. I think the problem is on hide you're using double equals instead of single equals on menuBox.style.display == "none";. Thus the menu is never hiding.
https://codepen.io/juanferrer/pen/qmOmWa
Finally i have landed into something like this using the flag variable as a state indicator.. now the only requirement is to check toggle as well as disappear the relevant menu by the same button..i.e. if signup menu is already open, the signup or reset button should close it and vice versa.
window.onload = function() {
document.getElementById('regd').style.visibility = 'hidden'; //regisration msg
document.getElementById('rset').style.visibility = 'hidden'; //reset msg
document.getElementById('reqpwd').style.display = 'none';
document.getElementById('signup').style.display = 'none';
};
var flag = 0;
function chk(elm) {
var signup_ = signup.id;
var reqpwd_ = reqpwd.id;
elm_ = elm.id;
if (elm_ == reqpwd_ && flag === 0 || elm_ == reqpwd_ && flag == 2) {
flag = 1;
hide(signup_);
show(reqpwd_);
}
if (elm_ == signup_ && flag === 0 || elm_ == signup_ && flag == 1) {
flag = 2;
show(signup_);
hide(reqpwd_);
}
if (elm_ == reqpwd_ && flag == 1 || elm_ == signup_ && flag == 2) {
hide(elm_);
flag = 0;
}
};
function show(abc) {
var menuBox = document.getElementById(abc);
if (menuBox.style.display === "none") { // if is menuBox hidden, display it
menuBox.style.display = "block";
}
};
function hide(abc) { // if is menuBox
var menuBox = document.getElementById(abc);
if (menuBox.style.display === "block") { //if displayed, hide it
menuBox.style.display = "none";
}
};
I'm doing an userscript of Greasemonkey and I want set a key to change style display:"" of none to block and vice versa of a node by press a key ("Home" in this case).
var bluebar = document.getElementById('pagelet_bluebar');
bluebar.style.display = "none";
document.addEventListener("keydown", function (e) {
if (e.keyCode == 36) {
showhideui();
}
}, false);
function showhideui() {
if (bluebar.style.display = "none") {
bluebar.style.display = "block";
} else if (bluebar.style.display = "block") {
bluebar.style.display = "none";
}
}
The solution was add == instead = in the conditions:
if (bluebar.style.display == "none")
else if (bluebar.style.display == "block")
Use == or === instead of single = sign in your comparison.
Check this link about comparison operators
var bluebar = document.getElementById('pagelet_bluebar');
document.addEventListener("keydown", function (e) {
if (e.keyCode === 36) { //press "Home" key change to block/none
showhideui();
}
}, false);
function showhideui() {
if (bluebar.style.display == "none") { //if is none
bluebar.style.display = "block" ; //change to block
} else if (bluebar.style.display == "block" || bluebar.style.display == "") { //if is block
bluebar.style.display = "none"; //change to none
}
}
Ps: If there is only those two possibilities, you could even use a more synthetic way :
(bluebar.style.display == "block" || bluebar.style.display == "") ? bluebar.style.display = "none" : bluebar.style.display = "block";
var lastid;
function show_submenu(obj) {
var ele = document.getElementById(obj).style;
var elemLastId = document.getElementById(lastid);
if (elemLastId != null) {
elemLastId.style.display = "none";
}
lastid = obj;
if (ele.display == "none") {
ele.display = "block";
} else {
ele.display = "none";
}
}
function toggle_menu(id){
var menu = document.getElementById(id);
if(menu.style.display == 'none')
menu.style.display = 'block';
else
menu.style.display = 'none';
}
Can somebody teach me how to debug this code?
I want to reset the main level when I click the button of menu again.
I am trying to get a collapsible link list to work using JavaScript.
However, there is a continual error in the Java document and I don't know why:
var css Node = document.createElement('link');
cssNode.setAttribute('rel', 'stylesheet');
cssNode.setAttribute('type', 'text/css');
cssNode.setAttribute('href', 'javascript-overrides.css');
document.getElementsByTagName('head')[0].appendChild(cssnode);
function toggle(toggler) {
if (document.getElementById) {
targetElement = toggler.nextsibling;
if (targetElement.classname == undefined) {
targetElement = toggler.nextsiblig.nextsibling;
}
if {
targetElement.style.display == "block") {
targetElement.style.display = "none";
}
else {
targetElement.style.display = "block"
}
}
}
function swap(targetid) {
if (document.getElementById) {
target = document.getElementById(targetid);
if (target.style.display == "block") {
target.style.display = "none";
}
else {
target.style.display = "block";
}
}
}
The error in on line 15 where is states "if ( document.getElementById){" but it seems fine to me.
Any advice?
jsLint returns 3 errors (and assuming your first line is var cssNode)
Compare to undefined with === ( if (targetElement.classname === undefined) )
if { targetElement.style.display == "block")} must be if (
Missing semicolon (targetElement.style.display = "block")
Broken Fiddle here (Push the jsLint button to see the errors)
Fixed Fiddle here