Javascript code Question) create a map object called “dataMap” and add all of the same control information to this objec

Post by **answerhappygod** » Fri Jul 08, 2022 6:37 am

Javascript code
Question)
create a map object called “dataMap” and add all of thesame control information to this object. You’ll need to use the“.set” method to perform the insert. Use the control “id” as the“key” and use the relevant property information from each control(e.g. text box “.value”) as the map “value”
This is the start code.
<html>
<head>
<title>Assignment</title>
<script language="JavaScript" type="text/JavaScript">
//*************************************************************
// event handler is shared by the pulldown and checkboxcontrols
// to ensure that the only "Ontario" customers are members
function testMemberProvince() {
var ref = $gel("selProvinces");
var selectedProv = ref.options[ref.selectedIndex].text;
if ($gel("chkMember").checked && selectedProv !=="Ontario") {
alert("Only Ontario Customers are able to be members");
$gel("chkMember").checked = false;
}
}
// ****************************************************
// event handler which is attached to the submit button
// tests all the text boxes for valid input
function submit() {
testEmpty("txtFirst");
testEmpty("txtLast");
testEmpty("txtAddress");
testEmpty("txtCity");
testEmpty("txtPostal");
testEmpty("txtPhone");
let dataSet = new Set();
datSet.add(document.getElementById("txtFirst").value);
}
// *********************************************
// helper function is used to test each text box
// to ensure that something was entered
function testEmpty(id) {
if ($gel(id).value === "") {
$gel(id).style.backgroundColor = "pink";
}
else {
$gel(id).style.backgroundColor = "white";
}
}
//*********************************************************************
// helper function serves as a "wrapper" arounddocument.getElementById
// the only benefit to using this function is to reduce typingelsewhere
function $gel(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<div>First Name</div>
<input type="text" id="txtFirst" maxlength="50" size="50"value="Sherlock" />
<br /><br />
<div>Last Name</div>
<input type="text" id="txtLast" maxlength="50" size="50"value="Holmes" />
<br /><br />
<div>Address</div>
<input type="text" id="txtAddress" maxlength="50" size="50"value="221 B Baker Street" />
<br /><br />
<div>City</div>
<input type="text" id="txtCity" maxlength="40" size="40"value="London" />
<br /><br />
<div>Province</div>
<select id="selProvinces"onchange="testMemberProvince();">
<option >British Columbia</option>
<option >Alberta</option>
<option >Saskatchewan</option>
<option >Manitoba</option>
<option selected>Ontario</option>
<option >Quebec</option>
<option >Nova Scotia</option>
<option >Prince Edward Island</option>
<option >Newfoundland & Labrador</option>
<option >Northwest Territories</option>
</select>
<br /><br />
<div>Postal Code</div>
<input type="text" id="txtPostal" maxlength="7" size="7"value="N6H 1V6" />
<br /><br />
<div>Telephone</div>
<input type="text" id="txtPhone" maxlength="12" size="12"value="519 555-1212" />
<br /><br />
<label><input type="checkbox" id="chkMember"onclick="testMemberProvince();" checked="true" />IsMember?</label><br />
<br /><br />
<input type="button" id="btnSubmit" value="Submit"onclick="submit();"/>
</body>
</html>