HTML and CSS Reference
In-Depth Information
EXAMPLE 15.16 ( CONTINUED )
aPara.appendChild(aTXT2);
aPara.appendChild(aBR);
aPara.appendChild(aTXT3);
}
</script>
<form>
Which paragraph do you want to remove? <br />
8
<input type="radio" name="choice"
value="aPara1">Paragraph 1 /><br />
<input type="radio" name="choice"
value="aPara2">Paragraph 2 /><br />
<input type="radio" name="choice"
value="aPara3">Paragraph 3 /><br />
<input type=button value="click for paragraph to remove"
9
onClick="remove(this.form); "/>
</form>
</body>
</html>
EXPLANATION
1
This user-defined function is responsible for removing a paragraph based on the
user's choice. The parameter, f , is a reference to the form object passed when the
button was clicked on line 9.
2
The for loop will iterate three times, one for each radio button.
3
The radio button's property, checked , returns true for the button if it was selected.
4
Based on the choice of the user (i.e., the radio button that was checked), the ge-
tElementById() method will return a reference to the value attribute of the radio
button that happens to be the unique id of the paragraph.
5
The paragraphs are children of the body element. Now that we have a reference to
the paragraph, it can be removed from the body of the document with the rem-
oveChild() DOM method.
6
This for loop cycles three times. For each iteration of the loop a new paragraph is
dynamically created using the DOM.
7
Each paragraph is assigned a unique id attribute to be used by JavaScript to get a
reference to the paragraph to be removed.
8
The user can click a radio button to remove one of the paragraphs.
9
When the user clicks this button, a reference to this form, this.form , is sent to the
function called remove() . This process is shown in Figures 15.28, 15.29, and
15.30.
Search WWH ::




Custom Search