时间戳

首页 > 解决方案 > 无法读取属性“AddEventListener”的问题

javascript - 无法读取属性“AddEventListener”的问题

问题描述

我是一名学习 JavaScript，我正在尝试使用 JavaScript 创建一个报价生成器，但我在显示报价时遇到问题并不断收到错误消息：

ERROR {
  "Message": "Uncaught TypeError: Cannot Read Property 'AddEventListener' Of Null",
  
}
ERROR {
  "Message": "Uncaught TypeError: Cannot Read Property 'AddEventListener' Of Null",
  
}
ERROR {
  "Message": "Uncaught TypeError: Cannot Read Property 'AddEventListener' Of Null",
  
}
ERROR {
  "Message": "Uncaught TypeError: Cannot Read Property 'AddEventListener' Of Null",
  
}

我的 JavaScript 代码：

const Quotes =[
  {
    name:'Stephen King',
    quote:'Get busy living or get busy dying'
  },
  {
    name:'Mark Caine',
    quote:'The first step toward success is taken when you refuse to be a captive of the environment in which you first find yourself.'
  } ,
  {
    name:'Helen Keller',
    quote:'When one door of happiness closes, another opens; but often we look so long at the closed door that we do not see the one which has been opened for us'
  },
  
  {
    name:'Mark Twain',
    quote:'Twenty years from now you will be more disappointed by the things that you didn’t do than by the ones you did do'
  
  },
 
  {
    name:'Eleanor Roosevelt',
    quote:'Great minds discuss ideas; average minds discuss events; small minds discuss people'
  },
  {
    name:'David Brinkley',
    quote:'A successful man is one who can lay a firm foundation with the bricks others have thrown at him.'
  }
];




const quotoBtn = document.getElementById("#Qtbtn");

const QuoteAuthor = document.getElementById("#quote-author");

const Quote = 
document.getElementById("#quote");





quotoBtn.addEventListener('click',randomQuote)  ;
  function randomQuote() {
  var rand =Math.floor(Math.random()*Quotes.length);
  Quote.innerHTML = Quotes[rand].quote;
    QuoteAuthor.innerHTML = Quotes[rand].name;
  

}
* {
font-family: 'Josefin Sans', sans-serif;
}
body {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#ffd0a8;
  color:#333;
  font-family: 'Josefin Sans', sans-serif;
  font-weight:400;
  text-transform:capitalize;

}

#container {
  
  text-align:center;
  padding:2rem;
  border-radius:5px;
  background-color:#d6ae8b;
  flex:0 0 80%;
  
}
#Qtbtn {
  border:none;
  color:#fff;
  background-color: #d89156;
  font-size:1.8rem;
  padding: 0.25rem 0.5rem;
  border-radius:7px;
  cursor:pointer;
  
  
}

#Qtbtn:hover {
  color:#e8ccb3;
  
}


blockquote {
  background-color:#ffd3ad;
 border-left:10px solid #fcdbbf;
  margin:1.5rem;
  padding:0.5rem;

  
}
#quote-author  {
  color:#d89156;
  
}
<!DOCTYPE><html>
  <head>
    <title>Quote generator</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">

    
  </head>
  <body>
    <div id="container">
      <h2>Quotes from famous people</h2>
      <button type="button" id="Qtbtn"> press to display a quote</button>
      <blockquote>
        <h2 id="quote">Quote</h2>
        <h3 id="quote-author">author of the quote </h3>
        </blockquote>
    </div>
    
    
   
    
    
  </body>
  
  
  
</html>

标签： javascripthtmladdeventlistener

解决方案

您收到错误是因为您的选择器为空。您没有名为#Qtbtn的 ID，您的 ID 是Qtbtn。getElementById 只需要 id 名称。

document.getElementById("Qtbtn");

推荐阅读