After the visibility of the selected element is changed to "visible" on the click of the button, I would like it to change back to "hidden" when the button is clicked again. So basically I would like to toggle the button.
But it seems not to be working. Can I get some direction as to what to do to solve this?
//Imported jumbotron element
var jumbo = document.getElementById("bill-board");
//project, skills and contact elements
var projects = document.getElementById("projects");
var skills = document.getElementById("skills");
var contact = document.getElementById("contact");
//Functionality that takes place when projects, skills and contact are clicked
//When the projects element is clicked
projects.addEventListener("click", () => {
if(document.getElementById("one").style.visibility = "hidden") {
one.style.visibility = "visible";
jumbo.textContent = "Projects";
console.log("It's visible and bill-board is changed to projects");
} else {
one.style.visibility = "hidden";
}
})
//When skills element is clicked
skills.addEventListener("click", () => {
if(document.getElementById("two").style.visibility = "hidden") {
two.style.visibility = "visible";
jumbo.textContent = "skills";
console.log("It's visible and bill-board is changed to skills");
} else {
one.style.visibility = "hidden";
}
})
//When contact element is clicked
contact.addEventListener("click", () => {
if(document.getElementById("three").style.visibility = "hidden") {
three.style.visibility = "visible";
jumbo.textContent = "Contacts";
console.log("It's visible and bill-board is changed to contacts");
} else {
one.style.visibility = "hidden";
}
})
Hi
Basically there are two problems
Problem 1
you are checking the status of visibility incorrectly.
if(document.getElementById("one").style.visibility = "hidden")
This should be as follows:
if(document.getElementById("one").style.visibility == "hidden")
The equality operator is ==.
Problem 2
inside this snippet
if(document.getElementById("one").style.visibility = "hidden") {
one.style.visibility = "visible";
jumbo.textContent = "Projects";
console.log("It's visible and bill-board is changed to projects");
} else {
one.style.visibility = "hidden";
}
you are not storing the element you got by calling document.getElementById("one")
into the variable "one" ..i.e the above snippet should be this.
let one = document.getElementById("one");
if(one.style.visibility == "hidden") {
one.style.visibility = "visible";
jumbo.textContent = "Projects";
console.log("It's visible and bill-board is changed to projects");
} else {
one.style.visibility = "hidden";
}
Similarly you should do for two and three.
Related
I know super basic question but I am at the beginning of my code journey!
I want to make that on Radio Button change that the image is changing too:
So I have added a event.listener and have saied if the the.value is even with any color do something.
Maybe thats all complete wrong but the acually problem i have right now with the console.log he gives me the falure:
Uncaught Syntax:Unexpected end of input
Maybe anyone sees a failure directly!
The link to my fun Project:
https://waldhoer.webflow.io/
Code:
<script>
$(document).ready(function(){
$('input[type=Radio]').click(function(){
alert(this.value);
});
if (this.value === red) {
document.getElementById(Red-Phone).style.visibility = "visible";
document.getElementById(Gold-Phone).style.visibility = "hidden";
document.getElementById(White-Phone).style.visibility = "hidden";
} else if (this.value === gold) {
document.getElementById(Red-Phone).style.visibility = "hidden";
document.getElementById(White-Phone).style.visibility = "hidden";
document.getElementById(Gold-Phone).style.visibility = "visible";
} else if (this.value === white) {
document.getElementById(Gold-Phone).style.visibility = "hidden";
document.getElementById(Red-Phone).style.visibility = "hidden";
document.getElementById(White-Phone).style.visibility = "visible";
};
</script>
You have not closed off the document ready function.
There is both a missing curly bracket which is the end of the function and a closing round bracket to match the opening bracket on the ready.
<script>
$(document).ready(function(){
$('input[type=Radio]').click(function(){
alert(this.value);
});
if (this.value === red) {
document.getElementById(Red-Phone).style.visibility = "visible";
document.getElementById(Gold-Phone).style.visibility = "hidden";
document.getElementById(White-Phone).style.visibility = "hidden";
} else if (this.value === gold) {
document.getElementById(Red-Phone).style.visibility = "hidden";
document.getElementById(White-Phone).style.visibility = "hidden";
document.getElementById(Gold-Phone).style.visibility = "visible";
} else if (this.value === white) {
document.getElementById(Gold-Phone).style.visibility = "hidden";
document.getElementById(Red-Phone).style.visibility = "hidden";
document.getElementById(White-Phone).style.visibility = "visible";
};
}); // HERE
</script>
If you use a text editor (like Notepad++ for example) it can probably highlight brackets for you so you can see where you have matches. I also find it useful to get it to count the number of opening and closing brackets of a particular type - if the counts aren't equal - go searching.
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";
}
};
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.
Im working on a little project.
Here is the fiddle:
http://jsfiddle.net/GJf46/
I need the invisible button to make all three divs invisible when clicked and visible again when clicked.
I tried doing this:
var gone = document.getElementById("invisible");
var div1 = document.getElementById("one");
var div2 = document.getElementById("two");
var div3 = document.getElementById("three");
gone.addEventListener("click", function () {
if (
div1.style.visibility == "visible",
div2.style.visibility == "visible",
div3.style.visibility == "visible") {
div1.style.visibility == "hidden";
div2.style.visibility == "hidden";
div3.style.visibility == "hidden";
} else {
div1.style.visibility == "visible";
div2.style.visibility == "visible";
div3.style.visibility == "visible";
}
});
Also I need an alert box when the textfields are not filled in correctly.
It should only accept the values I set as an example.
But I got no clue how to do that, im new to javascript.
I want this all without JQUERY.
You accidentally wrote == (equality comparison) instead of = (assignment). The corrected code can be tested here.
weg.addEventListener("click", function () {
if (
div1.style.visibility !== "hidden",
div2.style.visibility !== "hidden",
div3.style.visibility !== "hidden") {
div1.style.visibility = "hidden";
div2.style.visibility = "hidden";
div3.style.visibility = "hidden";
} else {
div1.style.visibility = "";
div2.style.visibility = "";
div3.style.visibility = "";
}
});
I utilized the fact that the default visibility is "visible" (source). Note that I explicitly check whether the visibility is "hidden". This is important: the visibility is an empty string initially, so testing whether it is "visible" leads to that the button doesn't work the first time it is clicked. One could solve this by writing div1.style.visibility === "visible" || div1.style.visibility === "" etc., but the above version is shorter.
The code can be made a bit cleaner if you introduce a state variable (the test is here):
var divsAreVisible = true;
weg.addEventListener("click", function () {
if (divsAreVisible) {
div1.style.visibility = "hidden";
div2.style.visibility = "hidden";
div3.style.visibility = "hidden";
} else {
div1.style.visibility = "";
div2.style.visibility = "";
div3.style.visibility = "";
}
divsAreVisible = !divsAreVisible;
});
Change your code to
var gone = document.getElementById("invisible");
var div1 = document.getElementById("one");
var div2 = document.getElementById("two");
var div3 = document.getElementById("three");
gone.addEventListener("click", function (){
if (
div1.style.visibility == "visible",
div2.style.visibility == "visible",
div3.style.visibility == "visible"
){
div1.style.visibility = "hidden";
div2.style.visibility = "hidden";
div3.style.visibility = "hidden";
} else {
div1.style.visibility == "visible";
div2.style.visibility == "visible";
div3.style.visibility == "visible";
}
});
And it should work :)
div1.style.visibility = "visible";
div2.style.visibility = "visible";
div3.style.visibility = "visible";
And so on.
Try this:
gone.addEventListener("click", clickToggle);
function clickToggle() {
var value = clickToggle.blnVisible ? "visible" : "hidden";
div1.style.visibility = value;
div2.style.visibility = value;
div3.style.visibility = value;
clickToggle.blnVisible = (value == "hidden");
}
Working Fiddle (sample)