I have a submit button that uses Gravity Forms to conditionally show or hide the button.
When the button is shown the code looks like: <button class="button gform_button" id="gform_submit_button_1" style="">
When the button is not shown the code looks like: <button class="button gform_button" id="gform_submit_button_1" style="display: none;">
So, what I wanted to do was display a div when the button is not displayed or has the inline style display: none.
I thought I could do something like this:
function myFunction() {
var x = document.getElementById('gform_submit_button_1');
if (x.style.display = 'none') {
document.getElementById("div1").style.display = "block";
} else {
document.getElementById("div1").style.display = "none";
}
}
<div id="div1">This is a hidden div that we can show with JavaScript</div>
This shows div1 when the page loads, but when style="" the div does not hide. When the condition is true and style="" the page does not refresh, which is probably the issue. Is there a way to tweak things so that when style="" div1 is not shown?
Thanks,
Josh
if (x.style.display = 'none')
This should be:
if (x.style.display == 'none')
otherwise, the if statement will return true in all cases, and the x.style.display property will be always 'none'.
As in the comment section, = is used for assignment, == for value comparison whereas === is used for type and value comparison.
And for this,
When the condition is true and style="" the page does not refresh,
which is probably the issue.
you should call the function somewhere so it can be executed after the page loading.
Alternatively, you could also simply add a Gravity Form HTML field with your alternative div inside. Then use conditional logic to show it when the submit button is hidden.
As the queue for editing of answer from #Dream Bold is full this is my answer regarding to this question based on the previous Answer.
Basically clarification
Following line of code:
if (x.style.display = 'none')
Should be changed to:
if (x.style.display == 'none')
Main difference is the operator used (==). In the first case by using "=" the if statement will always return true, and the x.style.display property will be always 'none'.
As in the comment section, = is used for assignment, == for value comparison whereas === is used for type and value comparison.
To learn more about expressions and operators: Check here
And regarding for following requirement
When the condition is true and style="" the page does not refresh,
which is probably the issue.
The problem in this is that the code is not executed.
You should first create function, then by adding event listeners or setting action which would call the previously created function so it can be executed after the page loading.
My suggestion is to use window.onload + another event listener/action attribute on element
Like this:
window.onload = function(){
var x = document.getElementById("gform_submit_button_1");
if(x.style.display == "none"){
alert("Display of x is none");
document.getElementById("div1").style.display = "block";
}
else{
alert("Display of x is not none");
document.getElementById("div1").style.display = "none";
x.style.display = "block";
}
}
Related
I'm trying to have a couple of buttons to show and hide some pictures, I have gotten it to somewhat work, but when I start the webpage the pictures are already shown, when I try make them invisible at start. I have tried swapping the "block" and "none" sentences in the function, but it just made the button less responsive.
javascript part:
function bassnectar() {
var x = document.getElementById("myDIV3");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
html part:
<button onclick="bassnectar()">Bassnectar</button>
<div id="myDIV3">
<img src="/images/bassnectar.jpg">
</div>
What you’re missing is that you’re assuming that block elements have a default display value of block. Which would be intuitive.
Such is not the case though.
The initial value of display is the browser’s default. If you query the value of the display property on a new HTML element, you’ll get an empty string.
It doesn’t return block until you explicitly set its display to block.
Edit:
It's important to note that setting a value in CSS doesn't change the behavior. If you set a div to be display block in CSS, it will still return an empty string if you query it.
Here's a working example:
var block = document.createElement("div");
var inline = document.createElement("span");
console.log("Initial display values:")
console.log(`block.style.display: ${block.style.display}`);
console.log(`inline.style.display: ${inline.style.display}`);
block.style.display = "block";
inline.style.display = "inline";
console.log("\nAfter setting them explicitly:")
console.log(`block.style.display: ${block.style.display}`);
console.log(`inline.style.display: ${inline.style.display}`);
div {
display: block !important;
}
I am trying to get this collapsible to function normally and show the first set of information when the page is loaded, make it disappear when the user presses "read more", and show new information.
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
function display() {
var x = document.getElementById("cover");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
You are attaching the onclick=display() to all of your list elements. GetElementById is going to return the first element with the given id, in this case it's always targeting your first cover (if you're triggering that elsewhere in your script). So since every 'read more' list element has the onclick function calling display(), it is always hitting your first element (because it's the first element with the respective id). What you could do instead pass in the event then use 'closest' and pass in the id there (if your intention is to hide the image as well). If not you can remove the display() on the onclick there.
The other elements are working as expected but you don't see it because your css on the enclosing container is hiding it (if you check your inspector you will notice the css being set as expected). You might want to add an overflow scroll to scroll within the container limits to see your expanded data, or use something like css flex with minimum height in order to expand the container to see your read more data
I have a DIV which has a display set to none, by using javascript I tried showing it by using the onclick of a button. But what happens is the exact opposite. My DIV is already shown and when I click the button it hides the DIV. What am i doing wrong here, please HELP!
This is my button and the div:
<button onclick="myFunction()">SHOW</button>
<div id="how_to_form">
<img src="../images/view.png">
</div>
This is the JS code:
function myFunction() {
var x = document.getElementById("how_to_form").style.display = 'none';
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Your line there has a double assignment:
var x = document.getElementById("how_to_form").style.display = 'none';
It first assigns the display to none:
document.getElementById("how_to_form").style.display = 'none';
and then takes the result of that expression (which is the string you assigned), and assigns it to x:
var x = 'none';
Which isn't what you want. First declare the variable for the element, then assign its style.
Also, it sounds like you want the element to start out hidden - assign its initial style outside the function:
const form = document.getElementById("how_to_form");
form.style.display = 'none';
function myFunction() {
if (form.style.display === "none") {
form.style.display = "block";
} else {
form.style.display = "none";
}
}
Or, to be more concise, use the conditional operator:
function myFunction() {
form.style.display = form.style.display === "none"
? 'block'
: 'none';
}
Also consider attaching the handler properly using Javascript, rather than using inline HTML attributes, which are generally considered to be pretty poor practice and can be hard to manage:
document.querySelector('button').addEventListener('click', myFunction);
have you checked if you have already set a default style to your div?
you either have to set your div's default style to display:none by inline
<div id="how_to_form" style="display:none">
or by css
<style>
#how_to_form{ display:none }
</style>
Issue is your variable assignment
Chaining the assignment operator is possible in order to assign a single value to multiple variables.
Please refer this link for variable assignment options
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators
var x = y= 10
Then both x and y values are 10
Similarly in your code var x is none
To achieve expected result , use below option
1. set CSS for html_to_form to display:none
2.In your code change variable x assignment to
var x = document.getElementById("html_to_form")
I have a javascript function that can be called by clicking on a link named Show / Hide search form to Show or Hide a search form:
<script>
function hide_show_form_search() {
var x = document.getElementById("searchform");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
The problem is that during the time that the page shows or hide the DIV called searchform the page becomes blank.
CODEPEN:
https://codepen.io/daniele0410/pen/ReRoPy
How can i resolve this problem?
I'm not sure I can answer the question of why your whole page is disappearing when you click the show/hide link.
I can however propose an alternative solution:
Use <span href='#' onclick="hide_show_search_form()" style="text-decoration: underline; cursor:pointer;">Show / Hide search form</span> to call your hide/show function. Here's some info on this usage.
Can wildcards be used with the Javascript "document.getElementById" line?
I have a Vb.net form with 3 div elements ("page1, page2, page3"). What I'm hoping to accomplish is allowing the user to click a button or hyperlink button that will navigate them to the next div ("page#"). Is there a way to do something like the following & loop through each element that has an ID like "page1", "page2", "page3", etc without hard coding?
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
For what I understand, you are looking for the querySelectorAll function and a for-in loop:
var elements = document.querySelectorAll("[id^='page']");
for(var e in elements){
// do Stuff - each element get's reached by elements[e]
}
for example:
var elements = document.querySelectorAll("[id^='page']");
for(var e in elements){
if(elements[e].style.display == 'none')
elements[e].style.display = 'block';
else
elements[e].style.display = 'none';
}
this will catch all elements with an id starting with the word "page" and toggle their visibility
Short answer: no, this is not possible. As Markai has pointed out, it is possible. I still feel like using a class is more appropriate, as this better captures the semantics.
A bit longer answer: perhaps you can give each element a class="page". Then you can hide all elements with that class and only display the one you're interested in. You can get elements with class 'page' by using document.getElementsByClassName('page') or the more friendly jQuery selector $('.page').
You could loop the elements. Instead of a toggle, hide all elements except the one you want.
function EnableVisibility(elementName, elementId)
{
for(i=1;i<4;i++)
{
if(i == elementId)
document.getElementById(elementName + i).style.display = 'block';
else
document.getElementById(elementName + i).style.display = 'none';
}
}
EnableVisibility("page", 2); // This would hide all pages and display page2
If you don't like the hardcoded 4, you could change the for loop with a while and if getElementById returns a null then exit the loop.
I personally like the class idea from Martijn and instead of changing the style directly you add or remove a class ex: class="page visible" class="page hidden"