In: Computer Science
Examine the following code, which contains six common bugs. In a separate Microsoft Word (or other word processing or text file), identify the line number of at least three (3) bugs as well as a brief description of each bug. 1. 2.
1. <!DOCTYPE html>
2. </html>
3. <head> <link rel="stylesheet" href="MyStyle.css"> </head>
4. <body>
5. <nav>
6. <a href="GroceryHome.html">Home</a> |
7. <a href="Products.html">Products</a> |
8. <a href="AboutUs.html">About Us</a> |
9. <a href="Contact.html">Contact</a>
10. </nav>
11. <header>
12. <h1> My Contact Page</h1>
13. </header>
14. <article>
15. Thank you for your interest in our grocery store. We offer delivery or call-ahead pickup services.
Please provide your contact information, and indicate your family's food preferences.
16. </article> <p>
17. <form action="#" method="post" id="form1">
18. <div class="div1">
19. <label for="fname1" >First Name:</label><br>
20. <input type="text" name="firstname1" id="fname1"><br>
21. <label for="lname1" >Last Name:</label><br>
22. <input type="text" name="lastname1" id="lname1"><br>
23. <label for="phone1" >Phone (i.e. 123-456-7890):</label><br>
24. <input type="text" name="phone1" id="phone1" placeholder="123-456-7890" ><br>
25. <label for="email1" >Email:</label><br>
26. <input type="text" name="email1" id="email1" placeholder="abc@xyz"><br>
27. <label for="contactpreference1" >Prefered contact method?</label><br>
28. <input type="radio" name="contactpreference1" value="phone" checked> Phone
29. <input type="radio" name="contactpreference1" value="email"> Email
30. <br><br>
31. <input type="submit" id="Submit1" value="Submit" onclick=" validateMyPage()" />
32. </div>
33. </form>
34. <form action="#" method="post" id="form2" >
35. <div class="div2">
36. <label for="fname2" >First Name:</label><br>
37. <input type="text" name="firstname2 id="fname2" required><br>
38. <label for="lname2" >Last Name:</label><br>
39. <input type="text" name="lastname2" id="lname2" required><br>
40. <label for="phone2" >Phone (i.e. 123-456-7890):</label><br>
41. <input type="tel" name="phone2" id="phone2" placeholder="123-456-7890" pattern='\d{3}[\-
]\d{3}[\-]\d{4}' required><br>
42. <label for="email2" >Email:</label><br>
43. <input type="email" name="email2" id="email2" placeholder="[email protected]" required><br>
44. <label for="contactpreference2" >Prefered contact method?</label><br>
45. <input type="radio" name="contactpreference2" value="phone" checked> Phone
46. <input type="radio" name="contactpreference2" value="email"> Email
47. <br><br>
48. <input type="submit" id="Submit2" value="Submit" />
49. </div>
50. <br><br>
51. <div class="myColumns ">
52. <select id="mySiteColor" onChange="changeColor(this.value)">
53. <option value="">-- Select a color --</option>
54. <option value="blue">Blue</option>
55. <option value="yellow">Yellow</option>
56. <option value="red">Red</option>
57. </select>
58. </div>
59. </form>
60. <script>
61. function validateMyPage() {
62. var firstname1 = document.getElementById("fname1").value;
63. if (firstname1 != "") {
64. alert("Please enter a first name.");
65. }
66. else {
67. alert(firstname1);
68. }
69. var phone1 = document.getElementById("phone1").value;
70. if (phone1 == "") {
71. alert("Please enter a phone number.");
72. return false;
73. }
74. else
75. {
76. var rePhone = new RegExp(/\d{3}[\-]\d{3}[\-]\d{4}/);
77. var reResult = rePhone.test(phone1);
78. if (reResult == false)
79. {
80. alert("Please provide a valid phone number in the format of: 222-222-2222.");
81. return false;
82. }
83. else
84. {
85. alert(phone1);
86. }
87. }
88. var email1 = document.getElementById("email1")!value;
89. if (email1 == "") {
90. alert("Please enter an email address.");
91. return false;
92. }
93. else
94. {
95. var reEmail = new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/);
96. var reResult == reEmail.test(email1);
97. if (reResult == false)
98. {
99. alert("Please provide a valid email address.");
100. return false;
101. }
102. else
103. {
104. alert(“email1”);
105. }
106. }
107. alert("Form data validated by JavaScript successfully!");
108. }
109. function changeColor(value) {
a. var myColor = document.getElementById("mySiteColor").value;
b. document.body.style.color = value;
110. }
111. </script>
112. </body>
113. </html>
Bug1: on line 37 " are missing for name="fname2"
we always write the name value in between single or double quotes
Bug2: on line 88 unexpected ! we have to use . there
we always fetch a value using id we use.
var email1 = document.getElementById("email1").value; this is the correct way
Bug3: unexpected == on line 96
we always asign value using a single equals
But here you used ==
correct statement is var reResult = reEmail.test(email1);
Bug4; on line 104
syntax error some special characters are in alert
if we need to alert email1 variable we have not to use any quotes
then correct syntax is alert(email1);
Bug5:
on line 109
there is
a. var myColor = document.getElementById("mySiteColor").value;
b. document.body.style.color = value;
here we cannot declare variable as a.var
and we cannot apply style as b.document.body.style color= calue
undefined a and b
Bug6
on line 63 wrong if condition for validation
here we have to use firstname1 == ""
then gives the correct alert message
The modified code is:
<!DOCTYPE html>
</html>
<head> <link rel="stylesheet" href="MyStyle.css">
</head>
<body>
<nav>
<a href="GroceryHome.html">Home</a>
<a href="Products.html">Products</a>
<a href="AboutUs.html">About Us</a> |
<a href="Contact.html">Contact</a>
</nav>
<header>
<h1> My Contact Page</h1>
</header>
<article>
Thank you for your interest in our grocery store. We offer delivery or call-ahead pickup services.
Please provide your contact information, and indicate your
family's food preferences.
</article> <p>
<form action="#" method="post" id="form1">
<div class="div1">
<label for="fname1" >First
Name:</label><br>
<input type="text" name="firstname1"
id="fname1"><br>
<label for="lname1" >Last Name:</label><br>
<input type="text" name="lastname1" id="lname1"><br>
<label for="phone1" >Phone (i.e. 123-456-7890):</label><br>
<input type="text" name="phone1" id="phone1" placeholder="123-456-7890" ><br>
<label for="email1" >Email:</label><br>
<input type="text" name="email1" id="email1" placeholder="abc@xyz"><br>
<label for="contactpreference1" >Prefered contact method?</label><br>
<input type="radio" name="contactpreference1" value="phone" checked> Phone
<input type="radio" name="contactpreference1" value="email"> Email
<br><br>
<input type="submit" id="Submit1" value="Submit" onclick=" validateMyPage()" />
</div>
</form>
<form action="#" method="post" id="form2" >
<div class="div2">
<label for="fname2" >First Name:</label><br>
<input type="text" name="firstname2" id="fname2" required><br>
<label for="lname2" >Last Name:</label><br>
<input type="text" name="lastname2" id="lname2" required><br>
<label for="phone2" >Phone (i.e. 123-456-7890):</label><br>
<input type="tel" name="phone2" id="phone2" placeholder="123-456-7890" pattern='\d{3}[\-
]\d{3}[\-]\d{4}' required><br>
<label for="email2" >Email:</label><br>
<input type="email" name="email2" id="email2" placeholder="[email protected]" required><br>
<label for="contactpreference2" >Prefered contact
method?</label><br>
<input type="radio" name="contactpreference2" value="phone"
checked> Phone
<input type="radio" name="contactpreference2" value="email">
Email
<br><br>
<input type="submit" id="Submit2" value="Submit" />
</div>
<br><br>
<div class="myColumns ">
<select id="mySiteColor" onChange="changeColor(this.value)">
<option value="">-- Select a color --</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="red">Red</option>
</select>
</div>
</form>
<script>
function validateMyPage() {
var firstname1 = document.getElementById("fname1").value;
if (firstname1 == "") {
alert("Please enter a first name.");
}
else {
alert(firstname1);
}
var phone1 = document.getElementById("phone1").value;
if (phone1 == "") {
alert("Please enter a phone number.");
return false;
}
else
{
var rePhone = new RegExp(/\d{3}[\-]\d{3}[\-]\d{4}/);
var reResult = rePhone.test(phone1);
if (reResult == false)
{
alert("Please provide a valid phone number in the format of: 222-222-2222.");
return false;
}
else
{
alert(phone1);
}
}
var email1 = document.getElementById("email1").value;
if (email1 == "") {
alert("Please enter an email address.");
return false;
}
else
{
var reEmail = new
RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/);
var reResult =reEmail.test(email1);
if (reResult == false)
{
alert("Please provide a valid email address.");
return false;
}
else
{
alert(email1);
}
}
alert("Form data validated by JavaScript successfully!");
}
function changeColor(value) {
var myColor = document.getElementById("mySiteColor").value;
document.body.style.color = value;
}
</script>
</body>
</html>
IF any queries regarding bugs comment please