Html Question posted in
Some basic documentation can be found here.

One button with two actions on HTML

I made a button in HTML and when I clicked it the first action worked but the second one didn’t. I want the same button to replace the text with new text after the second click.

<body>
        <button onclick=dosomething(); onclick=dosomething2() style="background-color:
        aquamarine;color:purple;
        font-size:40px;border-radius:100px;">Click Me!</button>

        <p style="color:red;font-size:80px;" id="test"></p>
        <script>
            function dosomething(){
                document.getElementById("test").innerHTML = "Why did you do what it said >:("
            }
        </script>
        <script>
            function dosomething2(){
                document.getElementById("test").innerHTML = "Stop it >:("
            }
        </script>
</body>
Tags:

3

Answers


  1. 0

    You can run 2 actions from one button by creating 1 function with all functions you need to run in it. You can modify your code like this:

    <body>
    <button onclick=doEverything();style="background-color:
    aquamarine;color:purple;
    font-size:40px;border-radius:100px;">Click Me!</button>

    <p style="color:red;font-size:80px;" id="test"></p>
    <script>
        function dosomething(){
            document.getElementById("test").innerHTML = "Why did you do what it said >:("
        }
        function dosomething2(){
            document.getElementById("test").innerHTML = "Stop it >:("
        }
       function doEverything(){
   dosomething();
   dosomething2();
  }
    </script>
    Login or Signup to reply.
  2. 0

    Only the first instance of the onclick attribute will be treated. If you know function 2 will always follow function 1, you could have them chain each other.

    <body>
  <button onclick="dosomething();" style="background-color:aquamarine;color:purple;font-size:40px;border-radius:100px;">Click Me!</button>
  <p style="color:red;font-size:80px;" id="test"></p>
  <script>
    function dosomething() {
      document.getElementById("test").innerHTML = "Why did you do what it said >:("
      dosomething2();
    }

    function dosomething2() {
      document.getElementById("test").innerHTML = "Stop it >:("
    }
  </script>
</body>
    Login or Signup to reply.
  3. 0

    try

    <body>
    <button onclick="dosomething()"
        style="background-color: aquamarine; color: purple; font-size: 40px; border-radius: 100px;">Click Me!</button>
    <p style="color: red; font-size: 80px;" id="test"></p>
    <script>
        function dosomething2() {
            document.getElementById("test").innerHTML = "Stop it >:("
        }
        function dosomething() {
            document.getElementById("test").innerHTML = "Why did you do what it said >:("
            document.querySelector("button").onclick = dosomething2
        }
    </script>
</body>

    Change the onclick of the button right after using dosomething.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search