Show Hide JavaScript Button

0

I'm having a hard time implementing the function of showing and hiding a div in HTML with JavaScript.

What I need is that when a return of the servlet is empty or null , hide a certain div . The same should happen to the contrary, for example, when the return of servlet is not empty or different from null , div appears.

Here's part of my code:

  • This is the div I want to hide or show and the JavaScript

 <script type="text/javascript">
                                    var a = '<%=a.getSoldes()%>';
                                    if (a !== null && a !== undefined) {
                                        document.getElementById('descricaosolucao').style.display = "block";
                                    } else {
                                        document.getElementById('descricaosolucao').style.display = "none";
                                    }
                                </script>
<div id="descricaosolucao" class="descricaosolucao" style="display: none;">
                                        <p class="titulo-comp">Solução<%=dataSol%></p>
                                        <p ><%=a.getSoldes()%></p>
                                    </div>

I have little knowledge of JavaScript and therefore would like your help.

Thanks in advance.

    
asked by anonymous 10.08.2017 / 21:54

2 answers

0

If it's something that does not change after the page is loaded, it's best to do the server side soon, by putting the right style directly in <div> .

<div id="descricaosolucao" class="descricaosolucao" style="${dataSol?'':'display: none;'}">
     <p class="titulo-comp">Solução<%=dataSol%></p>
     <p ><%=a.getSoldes()%></p>
</div>

In what I used a ternary operator directly in style :

style="${dataSol?'':'display: none;'}"

If dataSol is different from null it stays '' otherwise it gets display:none; and therefore hides

    
11.08.2017 / 03:08
0

I believe the problem is in the conditions of the if you are doing. Let's say "a.getSoldes ()" is empty, so variable a would look like this:

var a = '';

Both comparisons 'a! == null' and 'a! == undefined' return true. If you change the if condition to 'a.length > 0 'will have the behavior you want.

    
11.08.2017 / 02:42