Javascript Hide/Show Button Does Not Work Properly

Question

I want to add Javascript show/hide button to show and hide a dive element of my page.

This is my code:

while($r = $query->fetch(PDO::FETCH_OBJ)){
    echo "
    <html>
        <head>
            <title>What is the equivalent?</title>
            <style>
            .center{
                margin-left:50%;
            }
            </style>
        </head>
        <body>
            <div class='center'>
                <div class='show'>
                    <form action='' method='POST'>
                        <h1>".$r->german."</h1>
                        <h5>".$r->table_id."</h5>
                        <p><input type='submit' value='Show' onclick='myFunction()'></input></p></br>
                        <div id='myDIV'>
                            This is my DIV element.
                        </div>
                        <p></p>
                    </form>
                    <a href='en-de.php' style='text-decoration:none'>En to De</a>
                </div>
            </div>
            <hr>
            <p>$count</p>
        </body>
        <script>
        function myFunction() {
          var x = document.getElementById('myDIV');
          if (x.style.display === 'none') {
            x.style.display = 'block';
          } else {
            x.style.display = 'none';
          }
        }
        </script>
    </html>
    ";
}

As you can see I have set this <input type='submit' value='Show' onclick='myFunction()'></input> and the myFunction() is called at the bottom between script tags.

But the problem is it does not work out and div within id of myDIV is always shown at the page.

So how to fix this? What's going wrong here?

Because your `input` is of type `submit`, the page will reload, undoing any changes that have been made through Javascript. — El_Vanja, Jan 27 '21 at 15:50
Please click edit, then `[<>]` snippet editor and create a [mcve] WITHOUT PHP - this is not a PHP issue at all. Just paste JS, HTML and relevant CSS. Change the button to type="button" or access the submit event and use `e.preventDefault()` — mplungjan, Jan 27 '21 at 15:50
You are currently echoing an entire HTML document on a while loop. Also, IDs in HTML must be unique, meaning you cannot have multiple divs of ID `myDIV` (well you can, but this will be error-prone) — Anis R., Jan 27 '21 at 15:50
@AnisR. You can have multiple elements with the same `id`. You just need to be careful about what you do. — Rojo, Jan 27 '21 at 15:51
@Rojo If you need to NOT use the ID because it is duplicate, don't have the ID at all — mplungjan, Jan 27 '21 at 15:52
@Rojo Right, but this is error-prone, since `getElementById` will not work as expected. Should have clarified — Anis R., Jan 27 '21 at 15:52
Relevant for unique IDs: https://stackoverflow.com/a/9454716/2181514 - the spec says it **must be unique** - but browsers know we're a bit useless so don't enforce it, so, yes, you "can" have the same id, but you shouldn't. — freedomn-m, Jan 27 '21 at 15:58
Put an `alert("x")` at the end your for `myFunction` - you'll see the div is not there for the alert, then is back after you close the alert. Also watch the browser network tab (F12). Also add a `$(function() { console.log("start") })` (once, in a script tag, outside your `while`) and turn off clear console on refresh to see it appear when you're not expecting it. — freedomn-m, Jan 27 '21 at 16:01

score 1 · Answer 1 · answered Jan 27 '21 at 16:00

If you need more than one form, you should delegate
Do not loop a complete HTML page
Your myDIV is a duplicate ID, use a class instead

Perhaps you meant this - no need for the form at all. If you need a form, use the submit event instead

document.querySelector(".center").addEventListener('click', function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("toggle")) {
    tgt.closest(".show").querySelector(".myDIV").classList.toggle("hide")
  }
});

.hide {
  display: none;
}

<div class='center'>
  <div class='show'>
    <h1>german</h1>
    <h5>table_id 1</h5>
    <p><input type='button' value='Show' class="toggle" /></p>
    <div class='myDIV hide'>
      This is my DIV element 1
    </div>
  </div>
  <div class='show'>
    <h1>german</h1>
    <h5>table_id 2</h5>
    <p><input type='button' value='Show' class="toggle" /></p>
    <div class='myDIV hide'>
      This is my DIV element 2
    </div>
  </div>
</div>
<hr>
<p>$count</p>

score 0 · Accepted Answer · answered Jan 27 '21 at 15:51

0

Just change your input type to button

<input type='button' value='Show' onclick='myFunction()'></input>

answered Jan 27 '21 at 15:51

Marek Langer

36
8

Javascript Hide/Show Button Does Not Work Properly

2 Answers2