Javascript-Homework/arraysAssignment.html at main · Thinkgraser/Javascript-Homework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WDV221 Intro Javascript - Arrays</title>

<style>

	form	{
		border:thin solid gray;
		width:400px;
		background-color:#9FF;
		margin-left:50px;
	}

	form p	{
		padding-left:5px;
	}


</style>
<script>
  let states = ["Iowa", "Illinois", "Missouri", "Wisconsin"];
  let stateSalesTax = ["6%","11%","7%","8%"];
function addToDropdown(){
    let option = document.getElementById("selectState");
    for (let index = 0; index < states.length; index++) {
      option.innerHTML += "<option>" + states[index] + "</option>"
    }
}
function salesTaxLookup(){
  document.getElementById("displayTaxRat").innerHTML = "";
  let option = document.getElementById("selectState").value;
  for (let index = 0; index < states.length; index++) {
    if(option == states[index]){
      document.getElementById("displayTaxRat").innerHTML = stateSalesTax[index];
    }

  }
}
function resetForm() {
  document.getElementById("displayTaxRat").innerHTML = "";
}
</script>
</head>

<body onload="addToDropdown()">
<h1>WDV221 Intro Javascript</h1>
<h2>Project 6  Arrays Assignment</h2>
<hr />
<p>Please complete the following exercises on this page. When complete post this page to your  server. Make a link in your WDV221 homework  page for this assignment. </p>
<p>Include a comment in each script with the exercise number and a description of what the script is supposed to do.</p>
<p>Using Blackboard submit this  Assignment.</p>
<hr />
<h3>Lookup Tax Rate Form</h3>
<p>This form will use arrays to load the values into the drop down list. It will allow the user to select a state from the dropdown list. Once it is selected the tax rate for that state will be dislayed on the form.</p>
<form id="form1" name="form1" method="post" action="">
  <p>Please select a state:
    <select name="selectState" id="selectState" onchange="salesTaxLookup()">
    	<option>Please select a state</option>
    </select>
  </p>
  <p>The Sales tax rate is: <span id="displayTaxRat"></span> </p>
  <p>
    <input type="reset" name="button2" id="button2" value="Reset" onclick="resetForm()"/>
  </p>
</form>
<h3>Instructions:</h3>
<ol>
  <li>Create an array called states that lists the following states in this order: Iowa, Illinois, Missouri, Wisconsin</li>
  <li>Create a parallel array called stateSalesTax that lists the following values in this order: 6%,11%,7%,8%. </li>
  <li>Use Javascript to dynamically load the list of states into the drop down menu. </li>
  <li>Create a function called salesTaxLookup( ).</li>
  <li>Use the onchange event handler on the select element to run salesTaxLookup( )</li>
  <li>The function will use a lookup loop to find where the state is located in the states array. It can then get the corresponding tax rate from the stateSalesTax array.</li>
  <li>It will display the tax rate for the selected state.</li>
</ol>
</body>
</html>