JavaScript in the Browser

This page demonstrates basic JavaScript concepts by changing HTML and CSS dynamically. Open your browser console (Right Click → Inspect → Console) to try some snippets directly.

1. Changing Text

This text will be changed.

document.getElementById("text-demo").textContent = "Text changed with JS!";
  

2. Changing Styles

document.getElementById("color-box").style.backgroundColor = "lightblue";
  

3. Showing and Hiding Elements

You can hide or show me.

const p = document.getElementById("toggle-paragraph");
p.classList.toggle("hidden");
  

4. Responding to Clicks

document.getElementById("alert-button").addEventListener("click", () => {
  alert("You clicked me!");
});
  

5. Generating Random Colors

const randomColor = "#" + Math.floor(Math.random()*16777215).toString(16);
document.getElementById("random-color-box").style.backgroundColor = randomColor;
  

6. Adding New Content

const ul = document.querySelector("#list-area ul");
const li = document.createElement("li");
li.textContent = "New item added!";
ul.appendChild(li);
  

Dynamic Webpage Example