JavaScript questions and answers — next level
Input handling, events and DOM interaction, each with a complete worked page.
Source: js_qa_next.docx — course material by Kiran V.K., published here so it is readable without a Google account.
1. Greet User with Input Box and Label
This example allows the user to input their name in a text box. On clicking the button, a greeting message is displayed on the page using a label.
HTML Example:
markup
<!DOCTYPE html>
<html>
<body>
<label for="nameInput">Enter your name: </label>
<input type="text" id="nameInput">
<button id="greetButton">Greet</button>
<p id="greetingMessage"></p>
<script>
function greetUser(callback) {
var name = document.getElementById('nameInput').value;
var message = "Hello " + name + "!";
callback(message);
}
function updateGreeting(message) {
document.getElementById('greetingMessage').innerText = message;
}
function handleClick() {
greetUser(updateGreeting);
}
document.getElementById('greetButton').addEventListener('click', handleClick);
</script>
</body>
</html>2. Checkbox Selection and Display
This code provides a list of fruits as checkboxes. When the user selects fruits and clicks the button, the selected fruits are displayed in a label as an array.
HTML Example:
markup
<!DOCTYPE html>
<html>
<body>
<label><input type="checkbox" value="Apple" id="fruit1">Apple</label>
<label><input type="checkbox" value="Banana" id="fruit2">Banana</label>
<label><input type="checkbox" value="Mango" id="fruit3">Mango</label>
<button id="submitButton">Submit</button>
<p id="selectedFruits"></p>
<script>
function displaySelectedFruits() {
var selected = [];
if (document.getElementById('fruit1').checked) {
selected.push(document.getElementById('fruit1').value);
}
if (document.getElementById('fruit2').checked) {
selected.push(document.getElementById('fruit2').value);
}
if (document.getElementById('fruit3').checked) {
selected.push(document.getElementById('fruit3').value);
}
document.getElementById('selectedFruits').innerText = "Selected Fruits: " + selected.join(', ');
}
document.getElementById('submitButton').addEventListener('click', displaySelectedFruits);
</script>
</body>
</html>3. Check Number and Display Result on Page
This example allows the user to input a number in a text box. The code checks if the number is positive or non-positive and displays the result on the page.
HTML Example:
markup
<!DOCTYPE html>
<html>
<body>
<label for="numberInput">Enter a number: </label>
<input type="text" id="numberInput">
<button id="checkButton">Check</button>
<p id="resultMessage"></p>
<script>
function checkNumber() {
var num = parseInt(document.getElementById('numberInput').value);
var message = num > 0 ? "Positive number" : "Non-positive number";
document.getElementById('resultMessage').innerText = message;
}
document.getElementById('checkButton').addEventListener('click', checkNumber);
</script>
</body>
</html>4. Modify Paragraph Content with Input Box and Button
This example allows the user to input new content in a text box. On button click, the content is updated in the paragraph tag.
HTML Example:
markup
<!DOCTYPE html>
<html>
<body>
<label for="textInput">Enter new paragraph content: </label>
<input type="text" id="textInput">
<button id="updateButton">Update Paragraph</button>
<p id="paragraph">This is the original paragraph content.</p>
<script>
function updateParagraph() {
var newContent = document.getElementById('textInput').value;
document.getElementById('paragraph').innerText = newContent;
}
document.getElementById('updateButton').addEventListener('click', updateParagraph);
</script>
</body>
</html>5. Factorial Calculation with Input Box and Button
This example allows the user to input a number in a text box, and on button click, the factorial is calculated and displayed on the page.
HTML Example:
markup
<!DOCTYPE html>
<html>
<body>
<label for="factorialInput">Enter a number to find its factorial: </label>
<input type="text" id="factorialInput">
<button id="factorialButton">Calculate Factorial</button>
<p id="factorialResult"></p>
<script>
function calculateFactorial() {
var num = parseInt(document.getElementById('factorialInput').value);
var factorial = 1;
for (var i = 1; i <= num; i++) {
factorial *= i;
}
document.getElementById('factorialResult').innerText = "Factorial: " + factorial;
}
document.getElementById('factorialButton').addEventListener('click', calculateFactorial);
</script>
</body>
</html>6. Interactive JavaScript Function in External File
In this example, an external JavaScript file interacts with the HTML elements by reading the content of a text box, modifying it, and updating a paragraph tag.
HTML Example (with external script.js):
markup
<!DOCTYPE html>
<html>
<head>
<title>External JavaScript Example</title>
</head>
<body>
<label for="inputText">Enter text: </label>
<input type="text" id="inputText">
<button id="modifyButton">Modify</button>
<p id="paragraph">This is the paragraph content.</p>
<!-- script placed at the end of body, so the elements above already exist -->
<script src="script.js"></script>
</body>
</html>External JavaScript (script.js):
javascript
function modifyContent() {
var input = document.getElementById('inputText').value;
document.getElementById('paragraph').innerText = input;
}
document.getElementById('modifyButton').addEventListener('click', modifyContent);