Interactive JavaScript Examples
1. Variables and Data Types
Let's explore how to declare variables and work with different data types in JavaScript.
Try changing the values below and see the output!
Hello, World!
// HTML elements
const textInput = document.getElementById('textInput');
const greetButton = document.getElementById('greetButton');
const greetingOutput = document.getElementById('greetingOutput');
// Event listener
greetButton.addEventListener('click', () => {
const userName = textInput.value;
greetingOutput.textContent = `Hello, ${userName}!`;
});
2. Control Flow: If/Else Statements
Make decisions in your code using conditional statements.
Result will appear here.
// HTML elements
const numberInput = document.getElementById('numberInput');
const checkNumberButton = document.getElementById('checkNumberButton');
const numberResult = document.getElementById('numberResult');
// Event listener
checkNumberButton.addEventListener('click', () => {
const number = parseInt(numberInput.value);
let message = '';
if (number >= 0 && number <= 30) {
message = 'You are in the lower range.';
} else if (number > 30 && number <= 70) {
message = 'You are in the middle range.';
} else if (number > 70 && number <= 100) {
message = 'You are in the upper range.';
} else {
message = 'Invalid input.';
}
numberResult.textContent = message;
});
3. Loops: For Loop
Repeat actions efficiently with loops.
- Loop results will be listed here.
// HTML elements
const loopCountInput = document.getElementById('loopCount');
const runLoopButton = document.getElementById('runLoopButton');
const loopOutputList = document.getElementById('loopOutputList');
// Event listener
runLoopButton.addEventListener('click', () => {
loopOutputList.innerHTML = ''; // Clear previous results
const count = parseInt(loopCountInput.value);
for (let i = 1; i <= count; i++) {
const listItem = document.createElement('li');
listItem.textContent = `Iteration ${i}`;
loopOutputList.appendChild(listItem);
}
});