This is my own version of a mad-lib, but is not working right when i click on th
ID: 3745720 • 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 menuItem1 = "";
var menuItem2 = "";
var color ="";
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 Color
if (document.madLibForm.color[0].checked == true) {
color = document.madLibForm.color[0].value;
} else {
color = document.madLibForm.color[1].value;
} //end if
//Retrieving Menu Item 1
theSelect = document.madLibForm.color;
choice = theSelect.selectedIndex;
theOption = theSelect.options[choice];
menuItem1 = theOption.value;
//Retrieving Menu Item 2
theSelect = document.madLibForm.selLunch2;
choice = theSelect.selectedIndex;
theOption = theSelect.options[choice];
menuItem2 = theOption.value;
/*
Create the story. This is the toughest part. You have to be very careful to make sure all quotes are closed properly.
The best way to work on something like this is to start small. Write only a smart part of the story and immediately test.
If it is not working, fix what's broken, and continue to the next part of the story. It's always eaiser to debug a smaller
portion of the code than a bigger one.
*/
story = name + " likes cars. He likes all kinds of cars, " + car +
"etc. One day, he goes to a car dealer " + color;
document.madLibForm.story.value = story;
}
</script>
</head>
<h1>Mad Lib</h1>
<form name = "madLibForm">
<h3>Type a name of a person, any name on your mind:</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 = "chkTuck" 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>Select color :</h3>
<input type = "radio" name = "color" value = "red">Red<br>
<input type = "radio" name = "color" value = "black">Black<br>
<input type = "radio" name = "color" value = "white">White<br>
<input type = "radio" name = "color" value = "blue">Blue<br>
<P>
<h3>Transmission type :</h3>
<select name = "transmission">
<option value = ""></option>
<option value = "Manual">Manual</option>
<option value = "Automatic">Automatic</option>
</select>
<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
<!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 menuItem1 = "";
var menuItem2 = "";
var color ="";
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 Color
if (document.madLibForm.color[0].checked == true) {
color = document.madLibForm.color[0].value;
} else {
color = document.madLibForm.color[1].value;
} //end if
//Retrieving Menu Item 1
// theSelect = document.madLibForm.color;
//
// choice = theSelect.selectedIndex;
//
// theOption = theSelect.options[choice];
//
// menuItem1 = theOption.value;
//
//Retrieving Menu Item 2
// theSelect = document.madLibForm.selLunch2;
//
// choice = theSelect.selectedIndex;
//
// theOption = theSelect.options[choice];
//
// menuItem2 = theOption.value;
/*
Create the story. This is the toughest part. You have to be very careful to make sure all quotes are closed properly.
The best way to work on something like this is to start small. Write only a smart part of the story and immediately test.
If it is not working, fix what's broken, and continue to the next part of the story. It's always eaiser to debug a smaller
portion of the code than a bigger one.
*/
story = name + " likes cars. He likes all kinds of cars, " + car +"etc. One day, he goes to a car dealer " + color;
document.madLibForm.story.value = story;
//document.getElementById("story").value = story;
}
</script>
</head>
<h1>Mad Lib</h1>
<form name = "madLibForm">
<h3>Type a name of a person, any name on your mind:</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>Select color :</h3>
<input type = "radio" name = "color" value = "red">Red<br>
<input type = "radio" name = "color" value = "black">Black<br>
<input type = "radio" name = "color" value = "white">White<br>
<input type = "radio" name = "color" value = "blue">Blue<br>
<P>
<h3>Transmission type :</h3>
<select name = "transmission">
<option value = ""></option>
<option value = "Manual">Manual</option>
<option value = "Automatic">Automatic</option>
</select>
<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>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.