Reference no: EM13968794
This is a Javascript assignment - 6 questions.
1. Rewrite the below document to assign the event handler to the event property of the button element. This requires the chosen color to be obtained from the value property of the button element rather than through the parameter.
This is the HTML document
<!DOCTYPE html>
<!-- 5.1.hmtl
A document for color_click.js
-->
<html lang = "en">
<head>
<title> 5.1.html </title>
<meta charset = "utf-8" />
<script type = "text/javascript" src = "color_click.js" >
</script>
</head>
<body>
<h4> Favorite Color </h4>
<form id = "myForm" action = "">
<p>
<label> <input type = "radio" name = "colorButton"
value = "10"
onclick = "colorChoice(10)" />
Color red </label>
<br />
<label> <input type = "radio" name = "colorButton"
value = "20"
onclick = "colorChoice(20)" />
Color blue </label>
<br />
<label> <input type = "radio" name = "colorButton"
value = "30"
onclick = "colorChoice(30)" />
Color green </label>
<br />
<label> <input type = "radio" name = "colorButton"
value = "40"
onclick = "colorChoice(40)" />
Color yellow </label>
<br />
<label> <input type = "radio" name = "colorButton"
value = "50"
onclick = "colorChoice(50)" />
Color orange </label>
</p>
</form>
</body>
</html>
(This is the JS external file)
// color_click.js
// An example of the use of the click event with radio buttons,
// registering the event handler by assignment to the button
// attributes
// The event handler for a radio button collection
function colorChoice (color) {
// Produce an alert message about the chosen airplane
switch (color) {
case 10:
alert("Favorite color red");
break;
case 20:
alert("Favorite color blue");
break;
case 30:
alert("Favorite color green");
break;
case 40:
alert("Favorite color yellow");
case 50:
alert("Favorite color Orange");
break;
default:
alert("Error in JavaScript function colorChoice");
break;
}
}
2. Develop and test an HTML Document that has checkboxes for apple (59 cents each), oranges (49 cents each), and Banana (39 cents each), along with a submit button. each of the checkboxes should have its own o'clock event handler. these handlers must add the cost of their fruit to a total cost. An Event handler for the submit button must produce an alert window with the message your total cost is $xx, where xxx is the total cost of the chosen fruit, including 5% sales tax. this handler8 must return false (to avoid actual submission of the form data).
3. Develop and test an HTML document that is similar to exercise 5.3. in this case use test boxes rather than checkboxes. these text boxes take a number which is the purchase number of the particular fruit. the rest of the document should behave exactly like that of exercise 5.3
4. Add reality checks to the text boxes of the document in exercise 5.4. the checks on the text box inputs should ensure that the input values are numbers in the range from 0 to 99
5. Range checks for element inputs can be represented as new properties of the object that represents the element. Modify the document in excesses 5.5 to add a max property value of 99 and a min property value of 0. Your event handler must use the properties for the range checks on values input through the text boxes.
6. Develop and test an html document that collects the following information from the user: Last name, first name, middle initial, age (restricted to be greater than 17), and weight (restricted to the range from 80 to 300). You must have event handlers for the form elements that collect this information. This handlers must check the input data for correctness. message in an alert windows must be produced when errors are detected.