TrueVacancy Academy

HTML, CSS & JavaScript · Chapter 1.11 · Pro level

JavaScript Basics: Make a Button Do Something (DOM & Events)

JavaScript बेसिक्स: बटन से काम करवाओ (DOM और Events)

HTML is the body, CSS is the clothes, and JavaScript (JS) is the brain that makes a page react. Inside <script> ... </script> we write JS. Three magic steps: 1) find an element: document.getElementById('msg'), 2) listen for a click: button.addEventListener('click', ...), 3) change the page: msg.textContent = 'Hi!'. Variables in JS are made with let (can change) and const (fixed).

HTML शरीर है, CSS कपड़े, और JavaScript (JS) वह दिमाग़ है जो पेज को react करवाता है। <script> ... </script> के अंदर JS लिखते हैं। तीन जादुई स्टेप: 1) element ढूँढो: document.getElementById('msg'), 2) क्लिक को सुनो: button.addEventListener('click', ...), 3) पेज बदलो: msg.textContent = 'Hi!'। JS में variable let (बदल सकता है) और const (स्थिर) से बनते हैं।

Open this chapter in the live classroomHTML, CSS & JavaScript course outline

In the classroom you can run and edit this code in your browser, get hints and mark the chapter as done. क्लास में यह code ब्राउज़र में चलाकर बदल सकते हो।

Words and symbols in this chapter

<script> ... </script>
The place where JavaScript code lives inside HTML.
HTML के अंदर JavaScript कोड की जगह।
document.getElementById('msg')
Finds the element that has id="msg".
वह element ढूँढता है जिसमें id="msg" लिखा है।
addEventListener('click', ...)
Runs your code every time the element is clicked.
हर बार element पर क्लिक होने पर आपका कोड चलाता है।
.textContent = ...
Changes the text shown inside an element.
element के अंदर दिखने वाला टेक्स्ट बदलता है।
let count = 0;
Creates a JS variable that can change later (count = count + 1).
JS variable बनाता है जो बाद में बदल सकता है (count = count + 1)।

Ready example

<h2>Like Counter ❤️</h2>
<button id="likeBtn">👍 Like</button>
<p id="msg">Likes: 0</p>

<script>
  let count = 0;
  const btn = document.getElementById("likeBtn");
  const msg = document.getElementById("msg");
  btn.addEventListener("click", function () {
    count = count + 1;
    msg.textContent = "Likes: " + count;
  });
</script>

What you will see: Click the 👍 Like button in the preview — the number goes up every time!

प्रिव्यू में 👍 Like बटन दबाओ — हर क्लिक पर नंबर बढ़ेगा!

Line by line

let count = 0;
A variable to remember how many likes.
कितने likes हुए, यह याद रखने वाला variable।
const btn = document.getElementById("likeBtn");
Finds the button by its id.
बटन को उसके id से ढूँढता है।
btn.addEventListener("click", function () { ... });
Every click runs the code inside { }.
हर क्लिक पर { } के अंदर का कोड चलता है।
msg.textContent = "Likes: " + count;
Updates the paragraph with the new count.
पैराग्राफ में नया count दिखाता है।

Common mistake

✗ Wrong

document.getElementByID("msg")

✓ Right

document.getElementById("msg")

JavaScript is case-sensitive: it is getElementById (small "d" at the end).

JavaScript में बड़े-छोटे अक्षर मायने रखते हैं: सही है getElementById (आख़िर में छोटा "d")।

Your task

When the button is clicked, change the paragraph text to a greeting using addEventListener and textContent.

बटन दबाने पर addEventListener और textContent से पैराग्राफ में नमस्ते वाला टेक्स्ट दिखाओ।

  1. Under the TODO write btn.addEventListener("click", function () { and close it with });.
    TODO के नीचे btn.addEventListener("click", function () { लिखो और }); से बंद करो।
  2. Inside it write output.textContent = "Namaste! Button chal gaya";.
    अंदर output.textContent = "Namaste! Button chal gaya"; लिखो।
  3. Press ▶ Run, then click the button in the preview.
    ▶ Run दबाओ, फिर प्रिव्यू में बटन क्लिक करो।
Starter code for the task
<button id="helloBtn">Click me</button>
<p id="output">...</p>

<script>
  const btn = document.getElementById("helloBtn");
  const output = document.getElementById("output");
  // TODO: btn.addEventListener("click", function () { ... }) likho
  // aur andar output.textContent = "Namaste! Button chal gaya"; likho
</script>

Do this task in the classroom: your code is checked automatically and you get hints if something is missing.

Recap

Quick quiz

Which line runs code when a button is clicked?

कौन-सी लाइन बटन क्लिक होने पर कोड चलाती है?

  1. btn.color = "click"
  2. btn.addEventListener("click", function () { ... })
  3. <click>btn</click>
  4. print(btn)
Show the answer

Answer: B (btn.addEventListener("click", function () { ... }))

addEventListener("click", ...) registers a click handler.

addEventListener("click", ...) क्लिक पर चलने वाला कोड जोड़ता है।

Practice problems for this chapter

Solve them in the Practice Zone, where each answer is checked automatically and two hints are available.