How to assign a script to a button?

Asked

Viewed 79 times

0

Good afternoon!

I am doing documentation and need a side menu button to show/hide a div.

I tried this script here but it only shows/hides "Content 2" and never "Content 1":

<script>
    function myFunction(e) {
        // e.preventDefault();
        var cont = document.getElementById('collapseExample');
        cont.classList.toggle('show');
        cont.scrollIntoView({
            behavior: "smooth"
        });
    }
</script>

<script>
    function myFunction(e) {
        // e.preventDefault();
        var cont = document.getElementById('collapseExample2');
        cont.classList.toggle('show');
        cont.scrollIntoView({
            behavior: "smooth"
        });
    }
</script>

Does anyone know how to assign each of the scripts to an individual button?

Executable example below:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Exemplo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>
    .cont {
        margin-top: 120vh;
        margin-bottom: 120vh;
    }
</style>
</head>

<body>

    <p>
        <a class="btn btn-primary" href="#collapseExample" role="button" onclick="myFunction()">
            BOTÃO 1
        </a>
    </p>

    <p>
        <a class="btn btn-primary" href="#collapseExample2" role="button" onclick="myFunction()">
            BOTÃO 2
        </a>
    </p>

    <div class="collapse" id="collapseExample">
        <div class="card card-body">
            CONTEÚDO 1
        </div>
    </div>

    <div class="collapse" id="collapseExample2">
        <div class="card card-body">
            CONTEÚDO 2
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

    <script>
        function myFunction(e) {
            // e.preventDefault();
            var cont = document.getElementById('collapseExample');
            cont.classList.toggle('show');
            cont.scrollIntoView({
                behavior: "smooth"
            });
        }
    </script>

    <script>
        function myFunction(e) {
            // e.preventDefault();
            var cont = document.getElementById('collapseExample2');
            cont.classList.toggle('show');
            cont.scrollIntoView({
                behavior: "smooth"
            });
        }
    </script>
</body>

</html>

php javascript html function button

1 answer

0


You are duplicating the function myFunction(). So the second will overwrite the first, and will only work with button 2.

You should use only one function and pass the onclick the parameter this, which will be the button clicked on the function:

onclick="myFunction(this)"

And in the function take the attribute href click and remove the #, which will be the id from the div you open:

var div = e.getAttribute("href").replace("#","");

The e in function represents the button clicked sent by this.

Behold:

function myFunction(e) {
   // e.preventDefault();
   var div = e.getAttribute("href").replace("#","");
   var cont = document.getElementById(div);
   cont.classList.toggle('show');
   cont.scrollIntoView({
       behavior: "smooth"
   });
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<p>
  <a class="btn btn-primary" href="#collapseExample" role="button" onclick="myFunction(this)">
      BOTÃO 1
  </a>
</p>

<p>
  <a class="btn btn-primary" href="#collapseExample2" role="button" onclick="myFunction(this)">
      BOTÃO 2
  </a>
</p>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
      CONTEÚDO 1
  </div>
</div>

<div class="collapse" id="collapseExample2">
  <div class="card card-body">
      CONTEÚDO 2
  </div>
</div>

Browser other questions tagged php javascript html function button

You are not signed in. Login or sign up in order to post.