This is my own version of a mad-lib, but is not working right when i click on th
ID: 3746905 • Letter: T
Question
This is my own version of a mad-lib, but is not working right when i click on the "tell me the story" button, can you help me to fix this please, 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() {
//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;
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;
//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"/>
<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>
</form>
</html>
Explanation / Answer
If you have any doubts, please give me comment...
check with bolded text
<!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;
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;
//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.