-----已编辑----- 由于代码错误,故事没有正确呈现。需要新鲜的眼睛!
function story()
{
//collect the users input data
var transport = "";
var name = document.getElementsByName("name")[0].value
var title = document.getElementsByName("title")[0].value
var noun = document.getElementsByName("noun")[0].value
var num1 = document.getElementsByName("num1")[0].value
var num2 = document.getElementsByName("num2")[0].value
var travelmeasure = document.getElementsByName("measureravel").value
//write new html to the page to display the story
document.write("<h1>"+title+"</h1>");
document.write("<p>Once upon a time,</p>");
document.write("<p>"+name+" was trying to make their way to "+noun+" in a "+transport+".</p>");
document.write("<p>Unfortunately "+name+" didn't realise how far away "+houn+" really was.</p>");
document.write("<p>The assumption was "+num1+" "+measuretravel+" when really is turned out to be "+num2+" "+measuretravel+".</p>");
document.write("<p>Thankfully "+name+" likes to travel.</p>");
document.write("<p>THE END</p>");
}
- - -原来的 - - -
在添加“故事”功能和“继续”按钮之前,该页面运行流畅。我想做的是将用户输入变量应用于我在新 HTML 页面中编写的故事。我假设它可能只是代码错误,但我似乎看不到它。
<html>
<head>
<title>a4_part4</title>
<script type="text/javascript">
//<![CDATA[
function storytime()
{
//displays alert
alert("Welcome to an Interactive Story Spot.");
}
function confirm()
{
var spaceship = document.getElementsByName("transport")[0].value;
var ducatti = document.getElementsByName("transport")[1].value;
var ferrari = document.getElementsByName("transport")[2].value;
var jet = document.getElementsByName("transport")[3].value;
var train = document.getElementsByName("transport")[4].value;
var transport = "";
var name = document.getElementsByName("name")[0].value
var title = document.getElementsByName("title")[0].value
var noun = document.getElementsByName("noun")[0].value
var num1 = document.getElementsByName("num1")[0].value
var num2 = document.getElementsByName("num2")[0].value
var miles = document.getElementsByName("measuretravel")[0].value
var kms=document.getElementsByName("measuretravel")[1].value;
var travelmeasure = document.getElementsByName("measureravel").value
//determine which mode of transportation was chosen
if (document.getElementsByName("transport")[0].checked)
{
transport = spaceship;
}
else if (document.getElementsByName("transport")[1].checked)
{
transport = ducatti;
}
else if (document.getElementsByName("transport")[2].checked)
{
transport = ferrari;
}
else if (document.getElementsByName("transport")[3].checked)
{
transport = jet;
}
else if (document.getElementsByName("transport")[4].checked)
{
transport = train;
}
//determine which measure of travel was chosen
if (document.getElementsByName("measuretravel")[0].checked)
{
miles = "+num1+" + "+num2+" * 1.60934
measuretravel = miles;
}
else if (document.getElementsByName("measuretravel")[1].checked)
{
measuretravel = kms;
}
//display alert
alert ("Hello, "+name+", your story values are "+title+", "+transport+", "+noun+", "+num1+", "+num2+", and "+measuretravel+" ");
}
function story()
{
//collect the users input data
{
var transport = "";
var name = document.getElementsByName("name")[0].value
var title = document.getElementsByName("title")[0].value
var noun = document.getElementsByName("noun")[0].value
var num1 = document.getElementsByName("num1")[0].value
var num2 = document.getElementsByName("num2")[0].value
var travelmeasure = document.getElementsByName("measureravel").value
//write new html to the page to display the story
document.write("<h1>"+title+"</h1>");
document.write("<p>Once upon a time,</p>");
document.write("<p>"+name+" was trying to make their way to "+noun+" in a "+transport+".</p>");
document.write("<p>Unfortunately "+name+" didn't realise how far away "+houn+" really was.</p>")
document.write("<p> The assumption was "+num1+" "+measuretravel+" when really is turned out to be "+num2+" "+measuretravel+".</p>")
document.write("<p> Thankfully "+name+" likes to travel.<p>")
document.write("<p>THE END</p>");
}
//]]>
</script>
</head>
<body>
<form id="storyform" action="">
<h1>Create Your Own Story</h1>
<p style="font-weight:bold;"> Your Name
<input type="text" name="name" id="name" value="Jane Doe">
</p>
<p style="font-weight:bold;"> Story Title
<input type="text" name="title" id="title" value="Enter Story Title Here">
</p>
<p style="font-weight:bold;">Choose A Mode Of TRANSPORTATION</p>
<input type="radio" name="transport" id="transport" value="spaceship" checked="checked"> Spaceship
<br>
<input type="radio" name="transport" id="transort1" value="ducati"> Ducati
<br>
<input type="radio" name="transport" id="transport2" value="ferrari"> Ferrari
<br>
<input type="radio" name="transport" id="transport3" value="jet"> Jet
<br>
<input type="radio" name="transport" id="transport4" value="train"> Train
<br>
<br>
Enter a NOUN <input type="text" name="noun" id="noun" value="Paris" onclick=""/>
<br>
Enter a NUMBER <input type="text" name="num1" id="num1" value="1" checked="checked" onclick=""/>
<br>
Enter Another NUMBER <input type="text" name="num2" id="num2" value="2" onclick=""/>
<p style="font-weight:bold;">Choose a means of MEASURING TRAVEL</p>
<input type="radio" name="measuretravel" id="measuretravel1" value="miles"> Miles
<br>
<input type="radio" name="measuretravel" id="measuretravel2" value="kms" checked="checked"> Kilometers
<br>
<br>
<br>
<p>Please confirm before you continue<p>
<input type="reset" value="Clear Form">
<input type="button" value="Story Time!" onclick="storytime();">
<input type="button" value="Confirm" onclick="confirm();">
<input type="button" value="Continue" onclick="story();">
</form>
</body>
</html>