I have a simple HTML-CSS-JavaScript page with an event listener on a button to toggle a div.
However, all is working but the animation function takes two clicks first time to work, although i consoled the click event to prove that the button listens to the first click too.
i tried to wrap into window.onload but same thing.
note: i want to use pure javascript only.
thank you
this pic shows the first click (it says "clicked" in the console):
this pic shows the second click (animation took place):
Here is my code:
var showDivButton = document.getElementById('showDivButton');
var info = document.getElementById('info');
showDivButton.addEventListener('click', animation) ;
// animation func
function animation () {
console.log('Clicked!');
if (info.style.display === 'none'){
info.style.display = 'inline-block';
showDivButton.style.background = 'green';
} else {
info.style.display = 'none';
showDivButton.style.background = 'gray';
}
}
Look at My Plunker Here please. Thank you in advance.
Try to revise your function block as follow:
function animation () {
console.log('Clicked!');
if (info.style.display == '' || info.style.display == 'none'){
info.style.display = 'inline-block';
showDivButton.style.background = 'green';
} else {
info.style.display = 'none';
showDivButton.style.background = 'gray';
}
}
info.style.display is '' on initial
Because info.style.display refers to the style attribute of your div, not the computed Style, so on the first click, this is not set.
You may want to look at getComputedStyle, but i would advise switching class instead of directly modifying style.
Related
Im kinda new to the world of web development , right now I have knowledge in CSS & HTML and trying and learn TypeScript. Im trying to make this message icon to open up and close up this notifications bar.
right now this is i got so far:
document.getElementById("bar").addEventListener("click", function(){
document.querySelector(".messagebar").style.display = "flex";
})
I tried to make:
document.getElementById("bar").addEventListener("click", function(){
document.querySelector(".messagebar").style.display = "none";
it`s not working. ty for help!
I tried to make:
document.getElementById("bar").addEventListener("click", function(){
document.querySelector(".messagebar").style.display = "none";
it`s not working. ty for help!
You are adding 2 of the same event listeners to the same element. This means that the event listener you are creating here:
document.getElementById("bar").addEventListener("click", function(){
document.querySelector(".messagebar").style.display = "flex";
})
and the event listener created here:
document.getElementById("bar").addEventListener("click", function(){
document.querySelector(".messagebar").style.display = "none"
)}
are both being executed at the same time upon click. This means that the display is first being set to flex and secondly to none hence why you are unable to make it work.
In order to fix this we want to condense this into one event listener.
The following works:
document.getElementById("bar").addEventListener("click", () => {
const messageBar = document.querySelector('.messagebar')
const display = messageBar.style.display
// if display is flex sets it to none else sets it to flex
messageBar.style.display = display === 'flex' ? 'none' : 'flex'
});
If you want to toggle with the same button, or html element, you will have to track the currect state of the .messagebar.style.display.
document.getElementById("bar").addEventListener("click", function(){
const current = document.querySelector(".messagebar").style.display;
if (current === "none") {
document.querySelector(".messagebar").style.display = "flex";
} else {
document.querySelector(".messagebar").style.display = "none";
}
})
on this page (http://jodiaries.com/test/) I need to make a popup appear when I click on the red boxes.
So far it works, I added the onclick = "div1" attribute to the red box (on the others = "div2", etc) and use this:
function showhide(divElement) {
var e = document.getElementById(divElement);
if(e.style.display == 'flex'){
e.style.display = 'none';
} else {
e.style.display = 'flex';
}
}
for now the popup closes when I click again on the number, I would like to make it close by clicking anywhere outside that div/popup. I created another script (probably wrong) with this:
window.onload = function(){
var divToHide = document.getElementById('div1');
document.onclick = function(e){
if(e.target.id !== 'div_block-286-119'){
divToHide.style.display = 'none';
}
};
};
but it works only on the first red box, not on the others (because I target only div_block-286-119).
How can I get it to work with all popups (i will add more as soon as everything works)?
thanks in advance!
It's a bad idea to work with ids in your case, also in general. Instead of onclick="yourFunction()" use event listener. I didn't test the code down below, but it should work.
document.querySelectorAll(".crono-day-red").forEach(red => {
red.addEventListener("click", () => showhide(red));
})
const showhide = red => {
// I prefer to control styles by toggling classes.
// IMO, it's easier, especially for multiple styles.
red.closest(".ct-div-block").classList.toggle("popup-visible");
}
const closePopups = () => {
window.addEventListener("click", () => {
let clickedInside = event.target.classList.contains(".popup-visible")
|| event.target.closest(".popup-visible)"
if (clickedInside) {
return;
}
document.querySelectorAll(".popup-visible").forEach(x => x.classList.remove("popup-visible"));
})
}
window.onload = closePopups();
.ct-div-block .nove-gen-click { display: none }
.ct-div-block.popup-visible .nove-gen-click { display: flex }
All you need to do is to toggle "popup-visible" class by your functions.
I also noticed that you define popup styles in #div1 and #div2... Very bad practice.
EDIT AFTER COMMENT
To close currently open red box when you click the new one:
const showhide = red => {
red.closest(".ct-section-inner-wrap")
.querySelectorAll(".popup-visible")
.forEach(x => x.classList.remove("popup-visible"));
red.closest(".ct-div-block").classList.add("popup-visible");
}
I have a function which can download free resource and apply or modify my work. I used this function to make my website by setting all divs to display=none and with clicking on a button, the corresponding div display style will become block.
Everything was working fine until I add a music player that the creator use higher jQuery library (3.2.1 > 1.5.2).
Everything works great like before, but when I click on button to play the music, I can't go back or go to other menus.
Debugger error is :
uncaught TypeError: document.getElementById is not a function
But if I don't click on play button, everything is normal.
function openPage(pageName) {
var i;
var x = document.getElementsByClassName("page");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(pageName).style.display = "block";
}
Jquery does not prevent vanilla Javascript from running normally.
And as your code is simply Javascript, and from what it appears there are no mistakes within it, it's hard to figure out why such an error would appear. This has nothing to do with Jquery.
The only foreseeable error would be:
pageName is not passed as an argument;
pageName is passed, but is not a string;
no element with the id equal to the pageName's value exists within your document.
You could slightly improve your code by writing it in this way:
function openPage(pageName) {
Array.from(document.getElementsByClassName('page')).map(page => page.style.display = 'none');
document.getElementById(pageName).style.display = "block";
};
You could make it 'more fullproof' by adding some checks:
function openPage(pageName) {
if (pageName && (typeOf pageName === 'string')) {
Array.from(document.getElementsByClassName('page')).map(page => page.style.display = 'none');
var target = document.getElementById(pageName);
if (target) { target.style.display = "block" };
}
};
And yu could improve it by also loggin to the console, when a check has failed, for debugging:
function openPage(pageName) {
if (pageName && (typeOf pageName === 'string')) {
Array.from(document.getElementsByClassName('page')).map(page => page.style.display = 'none');
var target = document.getElementById(pageName);
if (target) {
target.style.display = "block"
} else {
console.log('No element found, with the ID of:' , pageName)
};
} else {
console.log('Error in openPage() : The provided [pagename] argument must be a [string]. Provided value for [pageName] is:', pageName);
}
};
Any idea why this function isn't working? I have a jsfiddle here http://jsfiddle.net/hoodleehoo/8wxwe9rd/
Here's the function I have:
$("#answer").on('input',function(e){
if(e.target.value === ''){
// Textarea has no value
document.getElementById('hotpages1').style.display = 'block';
document.getElementById('hotpages2').style.display = 'none';
} else {
// Textarea has a value
document.getElementById('hotpages1').style.display = 'none';
document.getElementById('hotpages2').style.display = 'block';
}
});
The goal is to have a div change it's display style based on whether the textarea is typed in. If the text is deleted and the text area is again blank it should toggle back to what it was originally.
UPDATE:
Okay, I forgot to put the jquery in the jsfiddle which I picked up on right after I posted this, but that didn't fix the issue on my page. After a ton of trial and error it turns out the function needs to be placed after the form, not before or inside. After moving the function to the bottom of the page it works beautifully!
You forgot to reference jQuery in the fiddle.
I changed the event to keyup, input also works. input's a newer event, consult the compatibility table.
$("#answer").on('keyup', function (e) {
var hot1 = document.getElementById('hotpages1'),
hot2 = document.getElementById('hotpages2');
if (e.target.value === '') {
hot1.style.display = 'block';
hot2.style.display = 'none';
} else {
hot1.style.display = 'none';
hot2.style.display = 'block';
}
});
http://jsfiddle.net/8wxwe9rd/5/
click: function(event, data) {
$('#clicked-state')
.text('You clicked: '+data.name);
if (data.name == "VA") {
$('#va').toggle();
}
else {
$('#va').style.display = 'none';
}
}
});
I have the above, the idea is if a different state is clicked, div id VA will hide. Currently you click 'VA' and div VA is toggled, but when you click a different state div VA still stays, it needs to hide!
Wrong!
$('#va').style.display = 'none';
try
$('#va')[0].style.display = 'none';
or
$('#va').get(0).style.display = 'none';
or
$('#va').hide();
something.style.display = 'none';
...is the vanilla JavaScript way.
$('something').hide();
...is the jQuery way.
If you prefer the vanilla JS way, you can get the first element of the jQuery object which will allow you to use style.display, because it casts it to a DOMElement.
$('something')[0].style.display = 'none'; // Cast to DOMElement rather than using a jQuery object