嗨伙计们。 我正在学习javascript,我正在尝试用javascript创建一个引号生成器,但是我在显示引号时遇到了问题,并且一直收到错误消息:
错误{“Message”:“未捕获的TypeError:无法读取Null的属性”AddEventListener“,
}错误{“消息”:“未捕获的TypeError:无法读取Null的属性”AddEventListener“,
}错误{“消息”:“未捕获的TypeError:无法读取Null的属性”AddEventListener“,
}错误{“消息”:“未捕获的TypeError:无法读取Null的属性”AddEventListener“,
}
我的javascript代码:
null
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>
null
由于选择器为NULL,您将得到错误。 您没有名为#QTBTN的ID,您的ID是QTBTN。 getElementById只需要id名。
document.getElementById("Qtbtn");
如果您使用的是基本的javascript,那么就不需要指定#或。 用于区分类和ID
`const quotoBtn = document.getElementById("#Qtbtn");
const QuoteAuthor = document.getElementById("#quote-author");
const Quote = document.getElementById("quote");
以上代码可以替换为
const quotoBtn = document.getElementById("Qtbtn");
const QuoteAuthor = document.getElementById("quote-author");
const Quote = document.getElementById("quote");