I need to add alert function to my code, If there are any input controls that ha
ID: 3747508 • Letter: I
Question
I need to add alert function to my code, If there are any input controls that have not been populated, you will display a warning message to the user. No story will be display. The warning message can be displayed via “alert()” function., Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Car - Mad Lib </title>
<script language="JavaScript">
function generateMadLib() {
debugger;
//Declaring and Initializing variables
var car = "";
var Name ="";
var color ="";
var transmission ="";
var menuItem1 = "";
var theSelect;
var choice = 0;
var theOption;
var story = "";
/*
Retrieving Name
document.madLibForm.txtName
-- madLibForm matches the name of the <form> element.
-- txtName matches the name of the <input> element.
*/
name = document.madLibForm.txtName.value;
//Retrieving car
if (document.madLibForm.chkSUV.checked == true) {
car = "SUV, ";
} //end if
if (document.madLibForm.chkTruck.checked == true) {
car += "Truck, ";
} //end if
if (document.madLibForm.chkSedan.checked == true) {
car += "Sedan, ";
} //end if
if (document.madLibForm.chkVan.checked == true) {
car += "Van, ";
} //end if
if (document.madLibForm.chkSportsCar.checked == true) {
car += "Sports Car, ";
} //end if
//Retrieving Transmission
if (document.madLibForm.transmission[0].checked == true) {
transmission = document.madLibForm.transmission[0].value;
} else {
transmission = document.madLibForm.transmission[1].value;
} //end if
//Retrieving Color
theSelect = document.madLibForm.color; // change the color name in form !error
choice = theSelect.selectedIndex;
theOption = theSelect.options[choice];
menuItem1 = theOption.value;
story = name + " went to the car dealer to buy a new car, he was checking all types of cars such as" + car +"etc. after he picked the right type of car that fit his lifestyle, the salesman asked " + name + " about the transmission type, he choose " + transmission + " transmission. For the color, " + name + " prefere the " + menuItem1 + " color.";
document.madLibForm.story.value = story;
//document.getElementById("story").value = story;
}
</script>
</head>
<h1>Mad Lib</h1>
<form name="madLibForm">
<h3>Type your name :</h3>
<input type="text" name="txtName" value="">
<P>
<h3>Select a type of car :</h3>
<input type="checkbox" name="chkSUV" value="SUV">SUV<br>
<input type="checkbox" name="chkTruck" value="Truck">Truck<br>
<input type="checkbox" name="chkSedan" value="Sedan">Sedan<br>
<input type="checkbox" name="chkVan" value="Van">Van<br>
<input type="checkbox" name="chkSportsCar" value="SportsCar">Sports Car<br>
<h3>Transmission :</h3>
<input type="radio" name="transmission" value="Manual">Manual<br>
<input type="radio" name="transmission" value="Automatic">Automatic<br>
<P>
<h3>Select color :</h3>
<select name="color">
<option value=""></option>
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Silver">Silver</option>
</select>
<p>
<input type="reset" name="reset" value="Clear" />
<p>
<p>
<input type="button" value="Tell Me the Story">
<p>
<h3>Here is the story:</h3>
<textarea name="story" rows="20" cols="80" wrap></textarea>
</p>
<a href="index.html">Back to Main Page</a>
</p>
</p>
</p>
</P>
</P>
</form>
</html>
Explanation / Answer
If you have any doubts, please give me comment...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Car - Mad Lib </title>
<script language="JavaScript">
function generateMadLib() {
//Declaring and Initializing variables
var car = "";
var Name = "";
var color = "";
var transmission = "";
var menuItem1 = "";
var theSelect;
var choice = 0;
var theOption;
var story = "";
/*
Retrieving Name
document.madLibForm.txtName
-- madLibForm matches the name of the <form> element.
-- txtName matches the name of the <input> element.
*/
name = document.madLibForm.txtName.value;
//Retrieving car
if (document.madLibForm.chkSUV.checked == true) {
car = "SUV, ";
} //end if
if (document.madLibForm.chkTruck.checked == true) {
car += "Truck, ";
} //end if
if (document.madLibForm.chkSedan.checked == true) {
car += "Sedan, ";
} //end if
if (document.madLibForm.chkVan.checked == true) {
car += "Van, ";
} //end if
if (document.madLibForm.chkSportsCar.checked == true) {
car += "Sports Car, ";
} //end if
//Retrieving Transmission
if (document.madLibForm.transmission[0].checked == true) {
transmission = document.madLibForm.transmission[0].value;
} else {
transmission = document.madLibForm.transmission[1].value;
} //end if
//Retrieving Color
theSelect = document.madLibForm.color;
choice = theSelect.selectedIndex;
theOption = theSelect.options[choice];
menuItem1 = theOption.value;
if (name != "" && car != "" && menuItem1 != "") {
story = name + " went to the car dealer to buy a new car, he start checking all types of cars " + car + "etc. once he select the right car type that reflects his lifestyle, the salesman ask him about the transmission, he choose " + menuItem1 + " transmission. For the color," + name + " prefere the " + color + " color.";
document.madLibForm.story.value = story;
} else {
alert("No story will be display");
}
//document.getElementById("story").value = story;
}
</script>
</head>
<h1>Mad Lib</h1>
<form name="madLibForm">
<h3>Type your name :</h3>
<input type="text" name="txtName" value="">
<P>
<h3>Select a type of car :</h3>
<input type="checkbox" name="chkSUV" value="SUV">SUV<br>
<input type="checkbox" name="chkTruck" value="Truck">Truck<br>
<input type="checkbox" name="chkSedan" value="Sedan">Sedan<br>
<input type="checkbox" name="chkVan" value="Van">Van<br>
<input type="checkbox" name="chkSportsCar" value="SportsCar">Sports Car<br>
<h3>Transmission :</h3>
<input type="radio" name="transmission" value="red">Manual<br>
<input type="radio" name="transmission" value="black">Automatic<br>
<p>
<h3>Select color :</h3>
<select name="color">
<option value = ""></option>
<option value = "White">White</option>
<option value = "Black">Black</option>
<option value = "Red">Red</option>
<option value = "Blue">Blue</option>
<option value = "Silver">Silver</option>
</select>
<p>
<input type="reset" name="reset" value="Clear" />
<input type="button" value="Tell Me the Story">
<p>
<h3>Here is the story:</h3>
<textarea name="story" rows="20" cols="80" wrap>
</textarea>
</p>
</p>
<a href="index.html">Back to Main Page</a>
</p>
</P>
</form>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.