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 id="gform_submit_button_1" style="">

When the button is not shown the code looks like: <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:

<div id="div1">This is a hidden div that we can show with JavaScript</div>

<script>
    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";
        }
    }
</script>

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

CodePudding user response：

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.

CodePudding user response：

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";
}
}