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();
});
Related
I'm working on a website where I want to show and hide images by clicking on a button/word. I used bit of code and it's working:
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Similar to the one used in a previous stack overflow question on this topic:
var button = document.getElementById('button'); // Assumes element with id='button'
button.onclick = function() {
var div = document.getElementById('newpost');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
However, I want the image to be hidden when you enter or refresh the site instead of shown. So instead of it starting by showing the image and hiding it when you click on the word, I want it to be hidden and shown when you click the word. How do I change the script to make that happen?
I tried to switching the "none" and "block" but it didn't work haha...
Thanks
You can hide the image when the script runs, which is when the page is loaded or refreshed.
So just adding one line is enough.
const button = document.getElementById("button") // Assumes element with id='button'
const imageElement = document.getElementById("newpost")
// Hide the image at the start
imageElement.style.display = "none"
// Toggle it on click
button.addEventListener('click', () => {
imageElement.style.display =
imageElement.style.display === "none" ? "block" : "none"
})
I also modified your code to make it a bit easier to read by using a ternary operator.
And in case you are using the .onClick method from the example: Prefer using addEventListener over .onX methods. More about that on MDN and on this answer.
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 was wondering if its possible to hide and display different elements by using a dropdown menu. Currently i have this code for my menu:
<select id="productSel" onChange="OnSelectedIndexChange()">
<option value="0">Value 0</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
and this for my javascript:
<script>
function OnSelectedIndexChange() {
if (document.getElementById('productSel').value == "0"){
document.getElementById("Option1").style.display = "block";
document.getElementById("Option2").style.display = "none";
document.getElementById("Option3").style.display = "none";
}
};
</script>
<script>
function OnSelectedIndexChange() {
if (document.getElementById('productSel').value == "1"){
document.getElementById("Option1").style.display = "none";
document.getElementById("Option2").style.display = "block";
document.getElementById("Option3").style.display = "none";
}
};
</script>
<script>
function OnSelectedIndexChange() {
if (document.getElementById('productSel').value == "2"){
document.getElementById("Option1").style.display = "none";
document.getElementById("Option2").style.display = "none";
document.getElementById("Option3").style.display = "block";
}
};
</script>
and this is the area that needs to change:
<div id="Option1" style="display:none">
<p>Option1</p>
<p>Line 2</p>
theres 2 more divs just like that except with different Option numbers but for some reason it wont show the rest of my code past the closing div tag. Im having trouble because that code works, except it only works for the top option. so if theres 3 options, they start off as all invisible the way i wanted but when i pick an option from the menu, it wont display them. it will only display the third option and not the other 2. if theres 2 options it will only display the second option and not the first, even if i pick the first one. This is my first time asking on here so im sorry if i wasnt clear
Dropdown box should be call 3 time events.Which you are created, so it last function call every time.You can change like this.
<script>
function OnSelectedIndexChange() {
if (document.getElementById('productSel').value == "0"){
document.getElementById("Option1").style.display = "block";
document.getElementById("Option2").style.display = "none";
document.getElementById("Option3").style.display = "none";
}
else if (document.getElementById('productSel').value == "1"){
document.getElementById("Option1").style.display = "none";
document.getElementById("Option2").style.display = "block";
document.getElementById("Option3").style.display = "none";
}
else if (document.getElementById('productSel').value == "2"){
document.getElementById("Option1").style.display = "none";
document.getElementById("Option2").style.display = "none";
document.getElementById("Option3").style.display = "block";
}
};
</script>
You are replacing the function each time you redefine it. It will only execute the value == "2" version.
At the least, you need to put all of the conditions inside a single copy of the function.
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).