Javascript-Homework/assignmentCompareNames.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WDV221 Intro Javascript</title>
<script>
function compareNames(){
  let name1 = document.getElementById("value1").value;
  let name2 = document.getElementById("value2").value;
  if(name1.toLowerCase() == name2.toLowerCase()){
    document.getElementById("result").innerHTML = "Same";
  }
  else{
    document.getElementById("result").innerHTML = "Different";
  }
}
function resetResult(){
  document.getElementById("result").innerHTML = "";
}


</script>
</head>

<body>
<h2>WDV221 Intro Javascript</h2>
<h3>Comparison and IF Statements - Compare Names Assignment </h3>
<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 />
<form id="form1" name="form1" method="post" action="">
  <p>Name 1:
    <input type="text" name="value1" id="value1" />
  </p>
  <p>Name 2:
    <input type="text" name="value2" id="value2" />
  </p>
  <p>Result: <span id = result></span> </p>
  <p><input type="button" value="Compare Names" onclick="compareNames()"/>
  </p>
  <p>
    <input type="reset" name="Reset" id="button" value="Reset" onclick="resetResult()" />
  </p>
</form>

<h3>Instructions:</h3>
<ol>
  <li>Create a function called compareNames( ).</li>
  <li>The function will compare the two input values from the form above.</li>
  <li>The comparison should be case insensitive.</li>
  <li>The results should display &quot;Same&quot; or &quot;Different&quot;.</li>
  <li>Use a span element and its .innerHTML property to display the results.</li>
  <li>Provide a reset function that will reset the form and results.</li></ol>
</body>
</html>