We Keep Coding

problem with conditions in javascript while working with DOM

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

wait for a element to exist on page, then fire click function (pure JS)

Not in jQuery, vanilla JS.
I have the below code I'm using that works fine within the console; the problem is the 'goCheck' element does not appear right away at default, after the user crawls through a few sections, then it appears visible; because of this the event listener is hitting null immediately.
How could I get this to execute WHEN my 'goCheck' element becomes visible on page?
var goCheck = document.getElementById('input_52_65_chosen');
goCheck.addEventListener('click', function (event) {
var value1 = document.getElementById('input_52_22').value;
var value2 = document.getElementById('input_52_100').value;
var value3 = document.getElementById('input_52_95').value;
// var value4 = document.getElementById('input_52_96').value;
if (value1 > 0 ) {
document.getElementById('rate').style.display = "none";
document.getElementById('pay-plans').style.display = "none";
document.getElementById('field_52_116').style.display = "none";
} else if (value1 === 0 ) {
document.getElementById('field_52_116').style.display = "block";
}
if (value2 > 0 ) {
document.getElementById('rate').style.display = "none";
document.getElementById('pay-plans').style.display = "none";
document.getElementById('field_52_116').style.display = "none";
} else if (value2 === 0 ) {
document.getElementById('field_52_116').style.display = "block";
}
if (value3 > 0 ) {
document.getElementById('rate').style.display = "none";
document.getElementById('pay-plans').style.display = "none";
document.getElementById('field_52_116').style.display = "none";
} else if (value3 === 0 ) {
document.getElementById('field_52_116').style.display = "block";
}
if (value1 && value2 && value3 == 0 ) {
document.getElementById('field_52_116').style.display = "block";
}
}
);

Listen to every click everywhere, then check if the element you are looking for was clicked:
document.body.addEventListener("click", function(event){
const goCheck = document.getElementById('input_52_65_chosen');
let el = event.target;
while(el && el !== goCheck) el = el.parentElement;
if(!el) return;
//...
});

Toggle Menus using buttons in JS - But it shows both menus

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

Checkbox in HTML turns off a function in a .js file

I am looking to make a checkbox that when unchecked, will turn off a certain function in a .js file. Can someone help me?
popup.html
HTML Check box:
content.js
Turn off this function:
var tweet = new Array();
var tweetName = new Array();
function linkSnipe() {
for (var i = 0; i < 5; i++) {
tweetName[i] = document.getElementsByClassName("fullname js-action-profile-name show-popup-with-id")[0].innerHTML;
tweet[i] = document.getElementsByClassName("js-tweet-text")[i].innerHTML;
}
if (tweet[0].match(shoeName) == shoeName && tweet[0].match(filterer) != filterer && tweet[0].match(filter2) != filter2) {
if(checkon == "Tweets"){
document.getElementsByClassName("twitter-timeline-link")[0].click();
update();
}
}
else if (tweet[1].match(shoeName) == shoeName && tweet[1].match(filterer) != filterer && tweet[1].match(filter2) != filter2) {
if(checkon == "Tweets"){
document.getElementsByClassName("twitter-timeline-link")[1].click();
update();
}
}
else if (tweet[2].match(shoeName) == shoeName && tweet[2].match(filterer) != filterer && tweet[2].match(filter2) != filter2) {
if(checkon == "Tweets"){
document.getElementsByClassName("twitter-timeline-link")[2].click();
update();
}
}
else if (tweet[3].match(shoeName) == shoeName && tweet[3].match(filterer) != filterer && tweet[3].match(filter2) != filter2) {
if(checkon == "Tweets"){
document.getElementsByClassName("twitter-timeline-link")[3].click();
update();
}
}
else if (tweet[4].match(shoeName) == shoeName && tweet[4].match(filterer) != filterer && tweet[4].match(filter2) != filter2) {
if(checkon == "Tweets"){
document.getElementsByClassName("twitter-timeline-link")[4].click();
update();
}
}
else if(checkon == "Tweets") {
location.reload();
}
}
setTimeout("linkSnipe()", 250);
}

When the checkbox is checked, redefine the function as:
<input type=checkbox ..... onchange="doit()">
function doit() {
window.linkSnipe=function() {}
}
I've used this too:
function doit() {
window['linkSnipe']=function() {}
}
If you want to turn the function on and off by the checkbox:
<input type=checkbox ..... onchange="doit(this)">
var linkSnipeSave = linkSnipe;
function doit(ck) {
if (ck.checked)
window['linkSnipe']=linkSnipeSave
else {
linkSnipeSave = linkSnipe; //not sure if this line is needed...pls test
window['linkSnipe']=function() {}
}
}

You could simply have a Boolean variable that changes with the state of your check box. You could then put an if statement around the function call that will only trigger if the checkbox is checked.
http://jsfiddle.net/W5P8X/
//initialize some variables.
bike_checked = false;
car_checked = false;
//get elements by their ID from html
bike = document.getElementById("bike");
car = document.getElementById("car");
//add event listeners to the html elements we found above
bike.addEventListener("click", toggle_bike, false);
car.addEventListener("click", toggle_car, false);
//toggle bike_checked variable on click
function toggle_bike(){
if(bike_checked == true)
bike_checked = false;
else
bike_checked=true;
current_state();
}
//toggle car_checked variable on click
function toggle_car(){
if(car_checked == true)
car_checked = false;
else
car_checked=true;
current_state();
}
//output current state.
function current_state(){
if(car_checked == true)
alert('Car checked');
if(bike_checked == true)
alert('Bike checked');
}
I answered with only javascript and no jQuery, but you could probably make it a bit more concise with jQuery.
I hope this helps.

Error in javascript

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