How to create a button using a function in JavaScript

Question

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.

I think you meant to put the button that calls NewFunction in the HTML part of the code, not within the <script> tags — Henry
– Henry, Commented Dec 12, 2023 at 20:39
Duplicate of jQuery click / toggle between two functions or JavaScript Toggle between 2 Functions — Heretic Monkey
– Heretic Monkey, Commented Dec 12, 2023 at 20:39
<button type="button" onclick="NewFunction()">Other</button> is likely causing an error in your script; you'll need to create an element and append it to something that already exists in your DOM. — mykaf
– mykaf, Commented Dec 12, 2023 at 20:53

Eric Risher · Accepted Answer · 2023-12-12 20:41:25Z

<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>

Nick Friesen · Accepted Answer · 2023-12-12 20:43:18Z

0

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>

answered Dec 12, 2023 at 20:43

Nick Friesen

7991 gold badge6 silver badges19 bronze badges

Comments

Zachary Taylor · Accepted Answer · 2023-12-12 20:50:46Z

<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

Collectives™ on Stack Overflow

How to create a button using a function in JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related