HTML和Javascript-按鈕不起作用
[英]HTML & Javascript - Button not working
問題描述
我正在嘗試完成入門性Web開發課程的最后一個項目（我對javascript和html很陌生），這是一個簡單的Mad Libs項目。 我整天都在嘗試使其正常運行，但我認為我已經在很大程度上消除了大多數錯誤。 我確實遇到了一個障礙，我正在使用的按鈕應該加載結果並調用使用JavaScript文件中的事件偵聽器構建故事的函數。 當我運行程序時，該按鈕不起作用。 我檢查了Google Chrome開發者控制台，但沒有收到任何錯誤消息或任何內容，因此不知道我在做什么錯。
這是我的JavaScript文件（名為mad_libs_1.js）：
var story = document.querySelector("#story");
var adjective1 = document.querySelector("#adjective1");
var verbEndingInED = document.querySelector("#verbEndingInED");
var nounPlural1 = document.querySelector("#nounPlural1");
var liquid = document.querySelector("#liquid");
var nounPlural2 = document.querySelector("#nounPlural2");
var famousPerson = document.querySelector("#famousPerson");
var place = document.querySelector("#place");
var occupation = document.querySelector("#occupation");
var noun1 = document.querySelector("#noun1");
var nationality = document.querySelector("#nationality");
var femaleCelebrity = document.querySelector("#femaleCelebrity");
var noun2 = document.querySelector("#noun2");
var femaleFriend = document.querySelector("#femaleFriend");
var nounPlural3 = document.querySelector("#nounPlural3");
var number = document.querySelector("#number");
var adjective2 = document.querySelector("#adjective2");
//event listener for the button
var finished = document.querySelector("#finished");
if(finished){
finished.addEventListener("click", createStory, false);
}
function createStory(){
console.log("createStory HAS BEEN CALLED");
var finalStory = "";
finalStory += "I enjoy long, " + adjective1.bold();
finalStory += " walks on the beach, getting " + verbEndingInED.bold();
finalStory += " in the rain and serendipitous encounters with " + nounPlural1.bold();
finalStory += ". I really like piña coladas mixed with " + liquid.bold();
finalStory += ", and romantic, candle-lit " + nounPlural2.bold();
finalStory += ". I am well-read from Dr. Seuss to " + famousPerson.bold();
finalStory += ". I travel frequently, especially to " + place.bold();
finalStory += ", when I am not busy with work. (I am a " + occupation.bold();
finalStory += ".) I am looking for " + noun.bold();
finalStory += " and beauty in the form of a " + nationality.bold();
finalStory += " goddess. She should have the physique of " + femaleCelebrity.bold();
finalStory += " and the " + noun2.bold();
finalStory += " of " + femaleFriend.bold();
finalStory += ". I would prefer if she knew how to cook, clean, and wash my " + nounPlural3.bold();
finalStory += ". I know I’m not very attractive in my picture, but it was taken " + number.bold();
finalStory += " days ago, and I have since become more " + adjective2.bold() + ".";
story.innerHTML = finalStory;
console.log(story + " IS THE STORY");
}
這是我的html：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Mad Libs 1</title>
<script type="text/javascript" src="mad_libs_1.js"></script>
</head>
<body lang="en-US">
<div class="container-fluid">
<h1>Mad Libs 1</h1>
</div>
<div class="container-fluid">
<ul>
<li>Adjective: <input type="text" name="adjective1" id="adjective1"><br>
<li>Verb Ending in "ED": <input type="text" name="verbEndingInED" id="verbEndingInED"><br>
<li>Noun (Plural): <input type="text" name="nounPlural1" id="nounPlural1"><br>
<li>Liquid: <input type="text" name="liquid" id="liquid"><br>
<li>Noun (Plural): <input type="text" name="nounPlural" id="nounPlural2"><br>
<li>Famous Person: <input type="text" name="famousPerson" id="famousPerson"><br>
<li>Place: <input type="text" name="place" id="place"><br>
<li>Occupation: <input type="text" name="occupation" id="occupation"><br>
<li>Noun: <input type="text" name="noun1" id="noun1"><br>
<li>Nationality: <input type="text" name="nationaltiy" id="nationality"><br>
<li>Female Celebrity: <input type="text" name="femaleCelebrity" id="femaleCelebrity"><br>
<li>Noun: <input type="text" name="noun2" id="noun2"><br>
<li>Female Friend: <input type="text" name="femaleFriend" id="femaleFriend"><br>
<li>Noun (Plural): <input type="text" name="nounPlural3" id="nounPlural3"><br>
<li>Number: <input type="text" name="number" id="number"><br>
<li>Adjective: <input type="text" name="adjective2" id="adjective2"><br>
<button id="finished">I'M FINISHED!</button>
</ul>
</div>
<div id="story"></div>
</body>
</html>
我知道我的代碼實踐可能很草率-我只是在嘗試完善它之前嘗試使其工作。 另外，我必須使用常規的javascript而不使用jquery。 感謝您為此提供的任何幫助，因為我一直辛苦工作了好幾個小時，試圖找出問題所在。
3 個解決方案
解決方案1
1 已采納 2016-12-13 04:44:31
根據@Jaromanda X的建議，嘗試將代碼包裝在一個函數中，然后將該函數分配為window.onload事件處理程序。
這樣，您的代碼將不會運行，直到HTML文檔已加載。 否則，您的代碼可能會在文檔加載之前運行，並且不會有任何HTML元素可操作。
function runOnLoad() {
// all your code in here
}
// assign your function as the handler for the onload event
window.onload = runOnLoad;
您可能有興趣閱讀此問題，以獲取有關頁面加載后如何運行代碼的更多信息，以及一些其他實現方法。
解決方案2
0 2016-12-13 04:41:40
您的代碼中有錯誤。 bold()是不是一個function ，如果你想使用bold ，你可以用文字<strong>標簽。
另外，如果要從textbox獲取值，則需要使用value屬性。
function createStory() {
console.log("createStory HAS BEEN CALLED");
var finalStory = "";
finalStory += "I enjoy long, <strong>" + adjective1.value+ "</strong>";
story.innerHTML = finalStory;
console.log(story + " IS THE STORY");
}
我已經對第first textbox進行了更正，其余的可以遵循。
解決方案3
0 2016-12-13 04:44:32
您可以使用addEventListener ：
var div = document.getElementById('div');
function blah(e) {
}
div.addEventListener('click', blah);u
這將在javascript中產生click事件。 盡管為此需要e參數，因為它需要調用事件。
HTML和Javascript按鈕不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.