Html - How to create a button using a function in JavaScript

TylerHarper
December 12, 2023
186 views
2 votes
3 Answers

I am trying to use the start button to pull up a new screen with another button. This is the code I am using (minus the background URLs).

<button type="button" onclick="myFunction()">Start</button>

<script>
    function myFunction() {

      document.body.style.backgroundColor = "#f3f3f3";
      document.body.style.backgroundImage = "url('example')";

      <button type="button" onclick="NewFunction()">Other</button>
    
    }

<script>
    function NewFunction(){
        document.body.style.backgroundImage = "url('example2')"
    }

</body>
</html>

I have tried using an if statement to determine if myFunction has been executed, and adding the button if the conditions are met.

Tags: html javascript

Answers

<html>
<body>

<button type="button" onclick="myFunction()">Start</button>
<div id="newButtonDiv"></div>
    <script>
        function myFunction() {
    
          document.body.style.backgroundColor = "#f3f3f3";
          document.body.style.backgroundImage = "url('example')";
    
        //   Example 1:
document.getElementById('newButtonDiv').innerHTML='<button type="button" onclick="NewFunction()">Other</button>';

        //  Example 2:
        let button=document.createElement('button')
        button.onclick="NewFunction()"
        button.innerText="Other"
        document.getElementById('newButtonDiv').append(button)
        }
   </script> 
    <script>
        function NewFunction(){
            document.body.style.backgroundImage = "url('example2')"
        }
    </script>
    </body>
    </html>

Not sure what you want, but…

Example 1: Takes the static div on the dom from the id and changes the inner HTML to the button.

Example 2: Creates a new element with the features you want, then appends it to the dom at your desired div’s id

<button type="button" id="startButton">Start</button>

<script>
    function createButton() {
      // Set background color and image
      document.body.style.backgroundColor = "#f3f3f3";
      document.body.style.backgroundImage = "url('example')";

      // Create a new button dynamically
      var newButton = document.createElement("button");
      newButton.type = "button";
      newButton.textContent = "Other";
      newButton.id = "otherButton";
      newButton.addEventListener("click", changeBackground);

      // Append the new button to the body
      document.body.appendChild(newButton);

      // Remove the 'Start' button
      var startButton = document.getElementById("startButton");
      startButton.parentNode.removeChild(startButton);
    }

    function changeBackground() {
        // Change background image
        document.body.style.backgroundImage = "url('example2')";
    }

    // Attach the createButton function to the 'Start' button
    document.getElementById("startButton").addEventListener("click", createButton);
</script>

This is the approach I would take:

button2.style.display = 'none';

function myFunction() {
  document.body.style.backgroundColor = "#f3f3f3";
  document.body.style.backgroundImage = "url('example')";
  button1.style.display = 'none';
  button2.style.display = 'block';

}

function NewFunction() {
  document.body.style.backgroundColor = "#fff";
  document.body.style.backgroundImage = "url('example2')"
  button1.style.display = 'block';
  button2.style.display = 'none';
}

<button id="button1" type="button" onclick="myFunction()">Start</button>
<button id="button2" type="button" onclick="NewFunction()">Other</button>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to create a button using a function in JavaScript

Answers