堆棧內存溢出
  簡體   English   中英

嘗試學習addEventListener並且我的代碼不起作用

[英]Trying to learn addEventListener and my code isn't working

 原文  2018-09-17 20:28:04  1   5    javascript/ html/ addeventlistener

問題描述

我正在嘗試創建一個魔術8球。 我已經在數組的頂部添加了答案，添加了選擇隨機答案的代碼，並且當單擊按鈕時，應該將所述隨機答案放置在div的ap標簽中。 實際上，它在codePen中工作了好幾次，然后停止了。 我沒有改變任何事情。 誰能告訴我我想念的東西嗎？

的HTML 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <title>8 Ball</title>
</head>
<body>
    <div class="ball">
        <div id="display">

          <p id="output"></p>
        </div>

    </div>
      <button id="button">Answer</button>
</body>
</html>

的JavaScript 

var answers = ["Yes!", "Absolutely!", "Not A Chance", "No", 
"Ask Me Later", "Not Yet"];

//random answer function displays random in the output id
var randomAnswer = answers[Math.floor(Math.random()*answers.length)];

function myFunction(){
    document.getElementById('output').innerHTML = randomAnswer;
 }

 document.getElementById('button').addEventListener('click', myFunction);

我嘗試過移動並查找addEventListener。 這里也有一些問題，但是我還沒有找到解決我問題的方法。

5 個解決方案

解決方案1
 3 已采納  2018-09-17 20:30:17

嘗試重新排序HTML中<script>標記的位置，以便在加載/解析DOM之后運行腳本。 運行腳本時，將不會顯示您要添加單擊偵聽器的button ，因為腳本是在<body> DOM內容加載並准備就緒之前從<head>標記運行的。

嘗試以下調整： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>8 Ball</title>
</head>
<body>
    <div class="ball">
        <div id="display">

          <p id="output"></p>
        </div>

    </div>
      <button id="button">Answer</button>

    <!-- Put script here instead -->
    <script src="script.js"></script>
</body>
</html>

另外，考慮修改您的JavaScript，以便每當用戶單擊按鈕時都會重新計算randomAnswer，以便答案顯示的答案每次按鈕單擊都可以更改： 

var answers = ["Yes!", "Absolutely!", "Not A Chance", "No", 
"Ask Me Later", "Not Yet"];

function myFunction(){

    //[UPDATE] Move the random answer computation inside of myFunction()
    var randomAnswer = answers[Math.floor(Math.random()*answers.length)];

    document.getElementById('output').innerHTML = randomAnswer;
 }

 document.getElementById('button').addEventListener('click', myFunction);

解決方案2
 2  2018-09-17 20:31:21

您的腳本已加載到標題中。 它是在頁面未完成加載的情況下執行的，因此您嘗試將偵聽器附加到尚不存在的button元素。 將其移動到正文部分的底部： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    // deleted
    <title>8 Ball</title>
</head>
<body>
    <div class="ball">
        <div id="display">
            <p id="output"></p>
        </div>
    </div>
    <button id="button">Answer</button>
    <script src="script.js"></script> // pasted here
</body>
</html>

解決方案3
 1  2018-09-17 20:31:19

問題是您的randomAnswer需要在函數內部定義，以便每次按下按鈕時都randomAnswer答案。 在函數之外，它是在頁面加載時定義的，每次的答案都是相同的。

這是更新的代碼段： 

 var answers = ["Yes!", "Absolutely!", "Not A Chance", "No", "Ask Me Later", "Not Yet" ]; function myFunction() { //random answer function displays random in the output id var randomAnswer = answers[Math.floor(Math.random() * answers.length)]; document.getElementById('output').innerHTML = randomAnswer; } document.getElementById('button').addEventListener('click', myFunction); 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> <title>8 Ball</title> </head> <body> <div class="ball"> <div id="display"> <p id="output"></p> </div> </div> <button id="button">Answer</button> </body> </html>

解決方案4
 1  2018-09-17 20:32:51

移動

//random answer function displays random in the output id var randomAnswer = answers[Math.floor(Math.random()*answers.length)];

在您的函數內部，如下所示：

function myFunction(){ var randomAnswer = answers[Math.floor(Math.random()*answers.length)]; document.getElementById('output').innerHTML = randomAnswer; }

解決方案5
 0  2018-09-17 20:53:54

document.getElementById('button').addEventListener('click', myFunction=()=>{

  //[UPDATE] Move the random answer computation inside of myFunction()
  var randomAnswer = answers[Math.floor(Math.random()*answers.length)];

  document.getElementById('output').innerHTML = randomAnswer;
});

將邏輯放在函數中，每次調用時都會創建邏輯。 或者您可以將函數分配給這樣的變量： 

var answers = ["Yes!", "Absolutely!", "Not A Chance", "No",
"Ask Me Later", "Not Yet"];

    let myFunction = function(){

    //[UPDATE] Move the random answer computation inside of myFunction()
    var randomAnswer = answers[Math.floor(Math.random()*answers.length)];

    document.getElementById('output').innerHTML = randomAnswer;
    }

    document.getElementById('button').addEventListener('click', myFunction);

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 addEventListener無法正常工作 Javascript.addEventListener 不工作 嘗試使用jQuery創建菜單，但我的代碼無法正常工作 嘗試學習Angular-為什么分頁在這里不起作用？ React應用程序中的addEventListener無法正常工作 為什么addEventListener單擊不起作用？ 為什么我的 JS 代碼不工作？ 我正在嘗試獲取此代碼以生成隨機密碼 我的簡單 JavaScript 代碼不起作用 為什么我的AJAX代碼不起作用？ 所以我正在嘗試使用 Math.cbrt 並且我的代碼沒有按預期工作
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM