Signups are currently closed. Check back soon!

Studio X Help Guide

JavaScript Basics

Make your profile react, change and move.

JavaScript makes your profile do things. You write it inside a <script> block. Put your scripts at the bottom of Your Content, after the HTML they work with, so that HTML already exists when the script runs.

Changing what's on the page

Give an element an id, find it with document.getElementById, then change it. textContent is its text; style changes its CSS.

Try it: edit the code and watch the resultAdd to my profile

<p id="message">This text will change.</p>

<script>
  var el = document.getElementById("message");
  el.textContent = "JavaScript changed me!";
  el.style.color = "crimson";
  el.style.fontWeight = "bold";
</script>

Loading...

var el = ... creates a variable: a name for something so you can use it again. Lines end with a semicolon. Text goes in quotes.

Reacting to clicks

Set an element's onclick to a function: a bundle of instructions that runs every time it's clicked.

Try it: edit the code and watch the resultAdd to my profile

<button id="btn">Click me</button>
<p>You've clicked <b id="count">0</b> times.</p>

<script>
  var clicks = 0;
  document.getElementById("btn").onclick = function () {
    clicks = clicks + 1;
    document.getElementById("count").textContent = clicks;
  };
</script>

Loading...

Showing and hiding things

classList.toggle adds a class if it's missing and removes it if it's there. Pair it with CSS for show/hide, dark mode, and more.

Try it: edit the code and watch the resultAdd to my profile

<style>
  .hidden { display: none; }
</style>

<button id="reveal">Show my secret</button>
<p id="secret" class="hidden">I still know all the words to that one song. 🎤</p>

<script>
  document.getElementById("reveal").onclick = function () {
    document.getElementById("secret").classList.toggle("hidden");
  };
</script>

Loading...

Lists of things: arrays and loops

An array is a list in square brackets. A for loop goes through it one item at a time; here it builds an HTML list for you.

Try it: edit the code and watch the resultAdd to my profile

<ul id="games"></ul>

<script>
  var games = ["Tetris", "Mario Kart", "Animal Crossing", "Minecraft"];
  var list = document.getElementById("games");

  for (var i = 0; i < games.length; i++) {
    var item = document.createElement("li");
    item.textContent = games[i];
    list.appendChild(item);
  }
</script>

Loading...

Random picks

Math.random() gives a random number between 0 and 1. Multiply by the list length and round down to pick a random item.

Try it: edit the code and watch the resultAdd to my profile

<p id="quote">Click for a quote.</p>
<button id="again">Another one</button>

<script>
  var quotes = [
    "brb",
    "Be creative. Be Xinsto.",
    "It's not a phase.",
    "Away from keyboard, never from my heart",
    "404: motivation not found"
  ];
  document.getElementById("again").onclick = function () {
    var pick = quotes[Math.floor(Math.random() * quotes.length)];
    document.getElementById("quote").textContent = "“" + pick + "”";
  };
</script>

Loading...

Making decisions: if and else

Show a different greeting depending on the visitor's time of day:

Try it: edit the code and watch the resultAdd to my profile

<h3 id="greeting"></h3>

<script>
  var hour = new Date().getHours();
  var text;

  if (hour < 12) {
    text = "Good morning! ☀️";
  } else if (hour < 18) {
    text = "Good afternoon! 🌤️";
  } else {
    text = "Good evening! 🌙";
  }

  document.getElementById("greeting").textContent = text;
</script>

Loading...

Timers

setInterval runs something over and over (every 1000 milliseconds = every second). setTimeout runs something once, after a delay.

Try it: edit the code and watch the resultAdd to my profile

<p>The time where you are: <b id="clock"></b></p>
<p id="later">Wait for it...</p>

<script>
  function updateClock() {
    document.getElementById("clock").textContent = new Date().toLocaleTimeString();
  }
  updateClock();
  setInterval(updateClock, 1000);

  setTimeout(function () {
    document.getElementById("later").textContent = "...there it is! (3 seconds later)";
  }, 3000);
</script>

Loading...

Dates and counting days

Try it: edit the code and watch the resultAdd to my profile

<p>I started this profile <b id="days"></b> days ago.</p>

<script>
  var start = new Date("2026-10-26");          // change to your own date
  var today = new Date();
  var days = Math.floor((today - start) / (1000 * 60 * 60 * 24));
  document.getElementById("days").textContent = days;
</script>

Loading...

Working with many elements at once

document.querySelectorAll finds everything matching a CSS selector. Then forEach does something to each one.

Try it: edit the code and watch the resultAdd to my profile

<p class="word">hover</p> <p class="word">over</p> <p class="word">us</p>

<script>
  document.querySelectorAll(".word").forEach(function (el) {
    el.onmouseover = function () {
      el.style.color = "hsl(" + Math.floor(Math.random() * 360) + ", 80%, 45%)";
    };
  });
</script>

Loading...

Seeing what your script is doing

console.log("hello") prints a message to your browser's developer console, a hidden panel that also shows any errors. Open it with F12 (or Cmd+Option+J on a Mac in Chrome, Cmd+Option+C in Safari once developer tools are turned on). If a script does nothing at all, the console almost always says why.

<script>
  console.log("My script is running!");
</script>

Learning more

JavaScript is huge, and everything you learn elsewhere works here too, within the sandbox's limits. The next chapter explains those limits, which are few but important.

What Works Here »

« Xinsto Hooks What Works Here »