我在JS中用bootstrap编写了一个Madlib程序。当用户输入值时，完整的故事将出现在bootstrap模式中。但它不起作用。模态看起来是空的。请帮我弄清楚出了什么问题。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>A simple Madlib game</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">A simple MadLib game</h4>
</div>
<div class="modal-body">
<div id="story_div"></div>
</div>
</div>
</div>
</div>
<div class="container">
<header>
<h2 class="text-center">A simple JavaScript MadLib game</h2>
</header>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">An adjective</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="adjOne" placeholder="such as: large, rusty, old etc.">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">An animal name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="animalOne" placeholder="such as: cow, monkey, lion etc.">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">A verb (Past tense)</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="verbPastOne" placeholder="such as: laughed, walked etc.">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">An adverb</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="adverbOne" placeholder="such as: always, carefully, barefooted etc.">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Another adjective</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="adjTwo" placeholder="such as: large, rusty, old etc.">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">A noun</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="noun" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">A noun</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="nounTwo" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">An adjective</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="adjThree" placeholder="such as: large, rusty, old etc.">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">A verb</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="verb" placeholder="such as: always, carefully, barefooted etc.">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">An adverb</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="adverbTwo" placeholder="such as: always, carefully, barefooted etc.">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">A verb (Past tense)</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="verbPastTwo" placeholder="such as: laughed, walked etc.">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">An adjective</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="adjFour" placeholder="such as: large, rusty, old etc.">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" id="launch" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch story</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
window.onload = function(){
var adjOne = document.querySelector("#adjOne");
var animalOne = document.querySelector("#animalOne");
var verbPastOne = document.querySelector("#verbPastOne");
var adverbOne = document.querySelector("#adverbOne");
var adjTwo = document.querySelector("#adjTwo");
var noun = document.querySelector("#noun");
var nounTwo = document.querySelector("#nounTwo");
var adjThree = document.querySelector("#adjThree");
var verb = document.querySelector("#verb");
var adverbTwo = document.querySelector("#adverbTwo");
var verbPastTwo = document.querySelector("#verbPastTwo");
var adjFour = document.querySelector("#adjFour");
var launch = document.querySelector("#launch");
launch.addEventListener("click", writeStory, false);
function writeStory(){
launchedStory = "";
launchedStory += "<p>Today I went to the zoo. I saw a(n) " + adjOne.value + " " + animalOne.value + " jumping up and down in its tree.<p>";
launchedStory += "<p>He " + verbPastOne.value + " " + adverbOne.value + " through the large tunnel that led to its " + adjTwo.value + " " + noun.value + ".<p>";
launchedStory += "<p>I got some peanuts and passed them through the cage to a gigantic gray " + nounTwo.value + " towering above my head. Feeding that animal made me hungry<p>";
launchedStory += "<p>I went to get a " + adjThree.value + " scoop of ice cream. It filled my stomach.<p>";
launchedStory += "<p>Afterwards I had to " + verb.value + " " + adverbTwo.value + " to catch our bus.<p>";
launchedStory += "<p>When I got home I " + verbPastTwo.value + " my mom for a " + adjFour.value + " day at the zoo.<p>";
story_div.innerHTML = launchedStory;
}
}
</script>
</body>
</html>
答案 0 :(得分：1)
如果你在javascript控制台看一下，你会直接看到问题（在你最喜欢的浏览器上试试 F12 ）。
它们都是由于拼写错误造成的。
"#verbPastOne"代替"#verPastOne" "#verbPastTwo"代替"#verPastTwo" 最后但并非最不重要......
verbPastOne.value代替verbPastOne.Value 是JavaScript区分大小写。