一个简单的JS madlib程序不起作用
一个简单的JS madlib程序不起作用
提问于 2016-05-20 14:59:02
我用引导程序用JS编写了一个Madlib程序。当用户输入值时，完整的故事将出现在引导模式中。但这不管用。模态看起来完全是空的。请帮我找出出了什么问题。守则如下：
<!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>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-05-20 15:34:00
如果您查看了javascript控制台，您将直接看到问题(在您最喜欢的浏览器上尝试F12 )。
它们都是由于拼写错误造成的。
- 编写
"#verbPastOne"而不是"#verPastOne" - 编写
"#verbPastTwo"而不是"#verPastTwo"
最后但同样重要的是..。
- 编写
verbPastOne.value而不是verbPastOne.Value
是的，JavaScript是区分大小写的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37350020
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号