JavaScript Codes to Copy and Paste

On this page you will find simple JavaScript examples (with HTML) that you can copy and paste into the PlayCode123 Code Sandbox.

JavaScript is easier to learn if you already know some HTML and CSS. If you are an absolute beginner, try a few HTML and CSS examples first, then come back here to make your pages interactive.

How to use this page

Open the Code Sandbox in a new tab.
On this page, click the Copy to Sandbox button above a code block.
Go to the sandbox tab, click in the code box, and press Ctrl + V (or ⌘ + V on Mac) to paste.
Click the Run Code button in the sandbox to see the result.
Change some text or values and run again to see what happens.

Reminder: JavaScript makes your page interactive (buttons that do something, changing text, reacting to clicks, etc.). In these examples, JavaScript code is inside a <script> tag at the bottom of the HTML document. In larger projects, JavaScript is often placed in a separate file (for example script.js) and linked to the HTML page.

Example 1 – Alert When the Page Loads

This example shows a simple alert message when the page is loaded.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page Load Alert</title>
  </head>

  <body>
    <h1>Welcome to PlayCode123</h1>
    <p>An alert will appear when this page is loaded.</p>

    <script>
      // This code runs as soon as the page is loaded
      alert("Welcome! The page has loaded.");
    </script>
  </body>
</html>

Try this: Change the text inside the alert(...) to your own message.

Example 2 – Button Click Alert

This example shows an alert when you click a button.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Button Click Alert</title>
  </head>

  <body>
    <h1>Click the Button</h1>
    <button onclick="showMessage()">Click me</button>

    <script>
      function showMessage() {
        alert("Hello! You clicked the button.");
      }
    </script>
  </body>
</html>

Try this: Change the button text and the message in the alert.

Example 3 – Change Text on Button Click

This example changes the text of a paragraph when you click a button.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Change Text Example</title>
  </head>

  <body>
    <h1>Change Text with JavaScript</h1>
    <p id="message">This text will change.</p>
    <button onclick="changeText()">Change the text</button>

    <script>
      function changeText() {
        var paragraph = document.getElementById("message");
        paragraph.textContent = "The text has been changed!";
      }
    </script>
  </body>
</html>

Try this: Change the new text to something else. Add another button that changes the text back.

Example 4 – Change Background Color with a Button

This example changes the background color of the page when you click a button.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Change Background Color</title>
  </head>

  <body>
    <h1>Change the Background Color</h1>
    <button onclick="makeRed()">Make background red</button>

    <script>
      function makeRed() {
        document.body.style.backgroundColor = "red";
      }
    </script>
  </body>
</html>

Try this: Add more buttons that change the background to other colors (blue, green, yellow).

Example 5 – Ask for the User's Name (prompt)

This example asks for your name and then shows a greeting on the page.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Prompt Name Example</title>
  </head>

  <body>
    <h1>Greeting Page</h1>
    <p id="greeting">Click the button to enter your name.</p>
    <button onclick="askName()">Enter your name</button>

    <script>
      function askName() {
        var name = prompt("What is your name?");
        if (name) {
          document.getElementById("greeting").textContent =
            "Hello, " + name + "! Welcome to my page.";
        }
      }
    </script>
  </body>
</html>

Try this: Change the question in the prompt() and the greeting text.

Example 6 – Simple Counter

This example increases a number every time you click the button.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Counter Example</title>
  </head>

  <body>
    <h1>Click Counter</h1>
    <p>You have clicked the button <span id="count">0</span> times.</p>
    <button onclick="increase()">Click me</button>

    <script>
      var counter = 0;

      function increase() {
        counter = counter + 1;
        document.getElementById("count").textContent = counter;
      }
    </script>
  </body>
</html>

Try this: Add another button that sets the counter back to 0.

Example 7 – Show and Hide Text

This example shows and hides a paragraph using two buttons.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Show and Hide Example</title>
  </head>

  <body>
    <h1>Show and Hide Text</h1>
    <p id="info">Aquatic plants grow in water environments around the world.</p>
    <button onclick="hideText()">Hide text</button>
    <button onclick="showText()">Show text</button>

    <script>
      function hideText() {
        document.getElementById("info").style.display = "none";
      }

      function showText() {
        document.getElementById("info").style.display = "block";
      }
    </script>
  </body>
</html>

Try this: Change the paragraph to your own text. Try starting with the text hi