HTML, Javascript and CSS Week 7 Homework

What does .textContent do in JavaScript?

• Sets or gets the HTML inside an element

• Sets or gets the text inside an element

• Changes the background color of an element

• Creates a new HTML element

What is the purpose of the .onclick property in JavaScript?

• Adds a new element to the page

• Changes an element’s text automatically

• Attaches a function to execute when the element is clicked

• Removes an element from the page

What does text.value do in JavaScript?

• A) Retrieves or sets the text content of an HTML element.

• B) Retrieves or sets the value of an <input> or <textarea> element.

• C) Changes the inner HTML of an element.

• D) Adds a new value to an array.

Answer explanation

.value is used to get or update the value of form elements like <input> and <textarea>.

It does not change the text inside regular HTML elements like <p> or <div>—for that, .textContent or .innerHTML is used.

What is the <span> element commonly used for in HTML and JavaScript?

• To create a new paragraph block

• To apply styles or JavaScript actions to a specific portion of text within a larger element

• To insert an interactive button

• To define a section of a webpage

Answer explanation

<span> is an inline element used to group text for styling or scripting.

It does not create a new block-level section like <div>, but instead allows targeted modifications using CSS or JavaScript (e.g., changing colors, hiding content, or updating text dynamically).

Common JavaScript events like onclick or .textContent are often used with <span> elements.

What is the main difference between oninput and onchange events in JavaScript?

• oninput triggers only when the user clicks an input field, while onchange triggers when the input is submitted.

• oninput fires every time the user types or modifies the input, while onchange fires only when the user moves away from the field after making a change.

• oninput works only with text inputs, while onchange works with all input types.

• Both events are identical and can be used interchangeably.

Answer explanation

oninput fires immediately whenever a change occurs (e.g., every keystroke in a text field).

onchange fires only when the user leaves the field after modifying the value (e.g., clicking outside a dropdown after selecting a new option).

onchange is commonly used for <select>, checkboxes, and radio buttons, while oninput is useful for real-time validation.

How does the script determine if the correct answer was selected in this example

• It checks if the button was clicked before displaying a message.

• It verifies if the radio button with the id="correct" is checked when the button is clicked.

• It automatically updates the result when the user selects an answer.

• It assigns a value to all radio buttons and compares them before displaying a message.

Answer explanation

The script sets result.textContent = 'Nope!'; by default.

It then checks if the #correct radio button (the "True" option) is selected using if (correct.checked).

If checked, it updates result.textContent = 'You got it!';.

Match the type of selectable objects

• range

• 
• radio

• 
• textarea

• 
• checkbox

• 
• value

• 

What will happen when the button is clicked in the following program?

• An error will occur because lastPlanet is not defined.

• The text inside the lastPlanet id will change to "Neptune is the last planet" when the button is clicked.

• The text inside the button will change to "Neptune is the last planet" when clicked.

• Nothing will happen because the function clickAction() is never called.

How can you check if a checkbox input is checked in JavaScript?

• element.isChecked()

• element.checked

• element.value

• element.selected

Some of the code above is missing! Write the code needed to change the reading heading changes when you click the button.