I have this script on dynamic radio buttons... On load the divs display, great. One is automatically checked, great. If I click the other radio button the divs hide, great. When I click back to the main radio button to show the divs again the divs don't reappear.
How do I get the divs to reappear (show)?????
function hide() {
var ele = document.getElementById("hideRow");
var coup = document.getElementById("coup");
if ("hideRow") {
ele.style.display = "none";
coup.style.display = "none";
} else {
ele.style.display = "block";
coup.style.display = "block";
}
}
Try :
function hide() {
var ele = document.getElementById("hideRow");
var coup = document.getElementById("coup");
if (ele.style.display == "block") {
ele.style.display = "none";
coup.style.display = "none";
} else {
ele.style.display = "block";
coup.style.display = "block";
}
}
This is always true:
if ("hideRow") {
// Always executes
}
So, you only ever get to the if-block. You need to change the conditional on your if-statement.
if (ele.style.visibility == 'visible';) {
ele.style.visibility = 'hidden';
coup.style.visibility = 'hidden';
} else {
ele.style.visibility = 'visible';
coup.style.visibility = 'visible';
}
I may have entirely missed the mark and not understood what your trying to do, but that's the way I'd do it (I think - you may be trying to do something else).
Related
I created a click event that opens a previously 'hidden' div and closes it again once you click the same button.
However, it only runs once (one open and one close) - I'm at a loss to explain why it doesn't work if I click it again.
let readMore = document.getElementById('clickAbout');
let moreInfo = document.getElementById('about');
let changeSepa = document.getElementById('sepChange');
readMore.addEventListener('click', function(){
changeSepa.style.height = '2rem';
if (moreInfo.className == "") {
moreInfo.className = "open";
moreInfo.style.display = 'block';
} else {
moreInfo.style.display = 'none';
}
});
this happens because you're checking if className == "", but you are modifying the className to be "open". On the second click it checks the className which is now "open" and goes to the else block. On the third click you expect for it to go into the first block but the className is still "open".
For an easy fix just change the className in the else block
else {
moreInfo.className = "";
moreInfo.style.display = 'none';
}
Also i suggest you make use of the classList property on elements
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
using the class list it could look like this:
readMore.addEventListener("click", function () {
changeSepa.style.height = "2rem";
if (moreInfo.className == "") {
moreInfo.classList.add("open");
moreInfo.style.display = "block";
} else {
moreInfo.classList.remove("open");
moreInfo.style.display = "none";
}
});
Or even
readMore.addEventListener("click", function () {
changeSepa.style.height = "2rem";
moreInfo.classList.toggle("open");
if (moreInfo.className == "") {
moreInfo.style.display = "block";
} else {
moreInfo.style.display = "none";
}
});
I'm fairly new in with JS and was wondering, if
there is a more cleaner way of writing this code?
I'm trying to create a button that shows or hides a div depending on whether it is currently showing.
Many Thanks in Advance
Anne
var button = document.getElementById('button');
var hideText = document.getElementById('output').className = 'hide';
button.addEventListener('click', ()=>{
if(hideText){
document.getElementById('output').className = 'unhide';
hideText = false;
}else{
document.getElementById('output').className = 'hide';
hideText = true;
}
})
CSS
.hide{display: none;}
.unhide{display: block;}
Just use a single class (e.g. unhide) and make it invisible by default. Then do
button.addEventListener('click', () => {
document.getElementById('output').classList.toggle('unhide');
}
You can just toggle the classes
button.addEventListener('click', () => {
document.getElementById('output').classList.toggle('hide');
}
You can remove the extra variable hideText and also the extra css if you implement like this
var x = document.getElementById("output");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
In jquery the are other simpler possible way like toggle, hide, show.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am really new to JS and I'm having some issues.
So I have this JS file: that is basically the same function repeating with different <div id="">.
var button = document.getElementById("obj-trigger");
button.onclick = function () {
var div = document.getElementById("obj-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
var button = document.getElementById("lineas-trigger");
button.onclick = function() {
var div = document.getElementById("lineas-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
var button = document.getElementById("cultura-trigger");
button.onclick = function() {
var div = document.getElementById("cultura-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
var button = document.getElementById("igualdad-trigger");
button.onclick = function() {
var div = document.getElementById("igualdad-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
var button = document.getElementById("proyectos-trigger");
button.onclick = function() {
var div = document.getElementById("proyectos-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
var button = document.getElementById("estigmas-trigger");
button.onclick = function() {
var div = document.getElementById("estigmas-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
var button = document.getElementById("soy-trigger");
button.onclick = function() {
var div = document.getElementById("soy-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
var button = document.getElementById("tudef-trigger");
button.onclick = function() {
var div = document.getElementById("tudef-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
And it works perfectly when I am using ALL the functions, however if I remove a <div> from my HTML, let's say: <div id="estigmas-trigger">, my JS will work until it reaches:
var button = document.getElementById("estigmas-trigger");
button.onclick = function() {
var div = document.getElementById("estigmas-cont");
if (div.style.display !== "none") {
div.style.display = "none"
}
else {
div.style.display = "block";
}
};
All code below that will stop working, so no more collapsing. :(
Why is that? And... how can I fix it?
It's because button will be null if there are no element with id estigmas-trigger, and you should get error that you can't set value onclick on null, try adding a check to test if button is not null:
var button = document.getElementById("estigmas-trigger");
if (button) {
button.onclick = function() {
var div = document.getElementById("estigmas-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
}
Your error is caused because when you remove an element from the HTML and then your Javascript tries to refer to that element without proper protections, it causes a script error and the script aborts execution because of the error.
The second thing you need to do when learning Javascript (after learning how to write your first script) is to learn how to check for errors in the debug console in the browser. That will show you when you have execution errors that are aborting your script and they will usually show you what line the error occurs on.
In this case, you would attempt to get a DOM element with a line such as:
var button = document.getElementById("estigmas-trigger");
And, then you would attempt to use the button variable. But, if the estigmas-trigger element was not in the page, then button would be null and it would be an error to reference a property of null such as .onclick.
In addition, your code is horribly repetitive. You really should never copy nearly identical code multiple times into your code. Instead, create a reusable function and use that function multiple places or if your code is almost entirely identical except for one input parameter (which is the case for you), then you can just put the one input parameter into an array and loop through the array.
Here's a much more DRY implementation (this replaces all of your code):
var buttons = ["obj-trigger", "lineas-trigger", "cultura-trigger",
"igualdad-trigger", "proyectos-trigger", "estigmas-trigger",
"soy-trigger", "tudef-trigger"];
buttons.forEach(function(id) {
var button = document.getElementById(id);
if (button) {
button.addEventListener("click", function(e) {
var cont_id = this.id.replace("trigger", "cont");
var elem = document.getElementById(cont_id);
if (elem) {
var style = elem.style;
if (style.display !== "none") {
style.display = "none";
} else {
style.display = "block";
}
}
});
}
});
Summary of changes:
Put all the trigger ID values into an array of strings so you can just loop through each one that you want to apply identical code to.
Use .forEach() to loop through the array of strings.
Get the DOM element for each id and check to see if it is present before trying to use it (this will solve your original problem).
Use .addEventListener() to add the click event handler as this is much more scalable than .onclick because you can have multiple click handlers for the same element this way. It is a generally good habit to switch to use .addEventListener().
Rather than refer to the xxx-cont ids by name, just derive them from the xxx-trigger ids using a simple text replacement. This saves more duplication and typing in your code.
Get the xxx-cont object in the DOM and also check to see if it exists before attempting to use it (safe coding).
One way is:
var button = document.getElementById("estigmas-trigger");
//that way you prevent define a function in a null object
if(button){
button.onclick = function() {
var div = document.getElementById("estigmas-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
}
I have a small bit of javascript for showing and hiding a div.
function hidefooter(){
var button = document.getElementById('footerbutton');
button.onclick = function() {
var div = document.getElementById('footerbox');
if (div.style.display !== 'block') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
};
}
The div starts {display:none;}. I looked around online and could only find people saying it was an html thing. My problem with that was that when i first wrote it the "block" and "none" values were switched and it took 3 clicks to work. Any help would be great.
update: A better explanation. This code does exactly what i want but you have to click twice to get the effect to work. At first i had the "block" and "none" properties switched and it took 3 clicks to get it to work. The footer starts out {display:none;}. I put it up online so a friend could take a look at it. the url is http://www.miettegoesplaces.com. click on the purple foot button on the right.
update 2: sorted the problem was i was calling the onClick twice. this is the simplified working version.
function hideFooter(){
var div = document.getElementById('footerbox');
if (div.style.display !== 'block') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
};
thanks for everyones comments and advice.
You have added click event twice here.
First, you are calling onClick event on button.
Inside hidefooter() function, you have defined button.onclick = function() {...}
remove button.onclick = function() {} and use like this :
function hidefooter(){
var button = document.getElementById('footerbutton');
var div = document.getElementById('footerbox');
if (div.style.display != 'block') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
Here is the working fiddle.
you need to add "display: none" to your footer's style
You can use window.getComputedStyle(elem) for Firefox, Opera, Safari and Chrome or elem.currentStyle for IE
var button = document.getElementById('footerbutton');
button.onclick = function() {
var div = document.getElementById('footerbox');
var style = window.getComputedStyle(div);
if (style.display !== 'block') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
};
Just remove the code that you use to define a button that handles events and add an onClick() event to your button instead
This code will work as you want it
function hidefooter(){
var div = document.getElementById('footerbox');
if (div.style.display !== 'block') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
}
But make sure your button code looks like this:
<button id="footerbutton" onClick="hidefooter()">Hide Footer</button>
Pay attention to onClick="hidefooter()"
And make sure your div is still display:none;
I believe the problem was that you're using the 'hide' button to define what it does and THEN do the hiding work. You should add an event handler that calls the hidefooter() function instead which has nothing but the footer hiding code.
HI I have a drop down menu, which determins which sections of a form should be displayed. This works, except for when the initial page loads all of the elements are shown. Once you make a selection it then displays only the correct elements.
Below is my Javascript, is there a way to set all of the elements to hidden initially, sorry if this is a stupid question but i am new to javascript.
if (current_value == "page_name") {
document.getElementById("contains").style.display = "block";
document.getElementById("term").style.display = "block";
document.getElementById("countries").style.display = "none";
document.getElementById("postcodes").style.display = "none";
document.getElementById("repeater").style.display = "none";
document.getElementById("visitor_type").style.display = "none";
document.getElementById("page_visits").style.display = "none";
document.getElementById("pvisits_value").style.display = "none";
}
else if (current_value == "postcode") {
document.getElementById("contains").style.display = "none";
document.getElementById("term").style.display = "none";
document.getElementById("countries").style.display = "none";
document.getElementById("postcodes").style.display = "block";
document.getElementById("repeater").style.display = "none";
document.getElementById("visitor_type").style.display = "none";
document.getElementById("page_visits").style.display = "none";
document.getElementById("pvisits_value").style.display = "none";
}
Give class attribute to all element.
Eg: if you have a input element like
<input type="text" name="something" id="something" class="hideme" />
hide element by using same class name for all elements as I explained above
$(document).ready(function() {
$(".hideme").hide();
});