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

Choose Open in Sandbox beside any example.
The Sandbox opens with the complete example already loaded and running.
Edit the JavaScript, then choose Run Code to see your changes.
Change some text or values and run again to see what happens.

Using the Sandbox on a smartphone

Tap Open in Sandbox beside an example.
The example opens automatically in the Sandbox.
Tap inside the editor to change the code.
Tap Run Code to update the preview.
Tap Reset this example to undo your changes.
Optionally tap Full-screen editor for more editing space.

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 – Message When the Page Loads

This example places a welcome message in the page when the DOM is ready.

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

  <body>
    <h1>Welcome to PlayCode123</h1>
    <p id="welcome-message" aria-live="polite"></p>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        document.getElementById("welcome-message").textContent =
          "Welcome! The page has loaded.";
      });
    </script>
  </body>
</html>

Try this: Change the welcome text and add a CSS class that makes it stand out.

Example 2 – Show a Message with a Button

This example updates a visible message when you activate a button.

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

  <body>
    <h1>Click the Button</h1>
    <p id="button-message" aria-live="polite"></p>
    <button type="button" id="message-button">Show message</button>

    <script>
      const messageButton = document.getElementById("message-button");

      messageButton.addEventListener("click", function () {
        document.getElementById("button-message").textContent =
          "Hello! You activated the button.";
      });
    </script>
  </body>
</html>

Try this: Change the button text and the message displayed on the page.

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" aria-live="polite">This text will change.</p>
    <button type="button" id="change-text-button">Change the text</button>

    <script>
      const changeTextButton = document.getElementById("change-text-button");

      changeTextButton.addEventListener("click", function () {
        const 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 type="button" id="color-button">Toggle red background</button>

    <style>
      .red-background {
        background-color: #b91c1c;
        color: white;
      }
    </style>

    <script>
      document.getElementById("color-button").addEventListener("click", function () {
        document.body.classList.toggle("red-background");
      });
    </script>
  </body>
</html>

Try this: Create another CSS class with a different high-contrast color combination and toggle that class with a second button.

Example 5 – Read a Name from a Form

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

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

  <body>
    <h1>Greeting Page</h1>
    <form id="name-form">
      <label for="name">Your name:</label>
      <input id="name" name="name" required>
      <button type="submit">Show greeting</button>
    </form>
    <p id="greeting" aria-live="polite"></p>

    <script>
      const form = document.getElementById("name-form");

      form.addEventListener("submit", function (event) {
        event.preventDefault();
        const name = document.getElementById("name").value.trim();
        document.getElementById("greeting").textContent =
          "Hello, " + name + "! Welcome to my page.";
      });
    </script>
  </body>
</html>

Try this: Add a labeled favorite-color field and include its value in the greeting.

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 aria-live="polite">You have clicked the button <span id="count">0</span> times.</p>
    <button type="button" id="counter-button">Click me</button>

    <script>
      let counter = 0;
      const counterButton = document.getElementById("counter-button");

      counterButton.addEventListener("click", function () {
        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 type="button" id="toggle-text-button" aria-expanded="true"
            aria-controls="info">Hide text</button>

    <script>
      const toggleButton = document.getElementById("toggle-text-button");
      const info = document.getElementById("info");

      toggleButton.addEventListener("click", function () {
        const willHide = !info.hidden;
        info.hidden = willHide;
        toggleButton.textContent = willHide ? "Show text" : "Hide text";
        toggleButton.setAttribute("aria-expanded", String(!willHide));
      });
    </script>
  </body>
</html>

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