我在调试时不断遇到错误，而且我找不到我的代码与我一直关注的 YouTube 教程之间的差异。
当我运行代码时，在我的 JS 文件中调用函数的所有变量旁边显示错误。
app.js:
button.onclick = function(){
var content = document.getElementsById("content");
var button = document.getElementById("showmore");
if(content.className == "open") {
button.innerHTML = "If you'd like to come click here to find out the address";
content.className = "";
button.innerHTML = "Show More";
} else {
content.className = "open";
button.innerHTML = "Show Less";
}
}
function changeColor(newColor) {
var elem = document.getElementById('para');
elem.style.color = newColor;
}
HTML(移除了图像和 CSS 以使其更具可读性):
<!DOCTYPE html>
<html>
<head> <!-- for mega data-->
<title> You're invited!</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h1>Sal and Cheong-a are getting married! </h1>
<h2> Would you like to come to our wedding?</h2>
<img src=/>
<h2> Our favorite Poem</h2>
<div id="content">
I don’t love you as if you were a rose of salt, topaz,
or arrow of carnations that propagate fire:
I love you as one loves certain obscure things,
secretly, between the shadow and the soul.
I love you as the plant that doesn’t bloom but carries
the light of those flowers, hidden, within itself,
and thanks to your love the tight aroma that arose
from the earth lives dimly in my body.
I love you without knowing how, or when, or from where,
I love you directly without problems or pride:
I love you like this because I don’t know any other way to love,
except in this form in which I am not nor are you,
so close that your hand upon my chest is mine,
so close that your eyes close with my dreams.
<br>
<br>
<br>
<br>
Join us at 500 Easthampton Rd, <br> Holyoke, MA 01040 <br>
The Log Cabin<br>
September 7th 2020.
</div>
<a id="showmore">If you'd like to come click here to find out the address.</a>
<p id="para">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
<script src = "app.js"></script>
</body>
</html>
最佳答案
首先，您的click 回调函数声明变量button 在您尝试使用它:
// You haven't declared "button" yet!
button.onclick = function(){
var content = document.getElementsById("content");
var button = document.getElementById("showmore"); // <-- Here's where you try
并且，该方法称为 .getElementById()。你有:
var content = document.getElementsById("content"); // <-- Misspelling!
并且(仅供引用)，不要使用 .innerHTML 来获取/设置不包含任何 HTML 的文本，那是对处理资源的浪费。对于非 HTML 字符串，请使用 .textContent。
所以，你需要:
// Get your DOM references first (and just once):
var button = document.getElementById("showmore");
var content = document.getElementById("content");
// Then, you can use them:
button.onclick = function(){
if(content.className == "open") {
button.textContent = "If you'd like to come click here to find out the address";
content.className = "";
button.textContent = "Show More";
} else {
content.className = "open";
button.textContent = "Show Less";
}
};
关于javascript - 如何让外部函数(在 javascript 中)调用 html 中的 ID？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50764592/