该按钮需要在 css 中进行编辑，才能按照我的方式显示，该部分的工作方式。然后它需要显示一条消息：“欢迎来到编码世界！”单击按钮后。我觉得这件事很小，但我已经重读了 20 遍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Greeting Page</title>
<style>
h1 {
font-size: 14pt;
text-align: center;
}
body {
background-color: #eec0c8;
font-family: Georgia;
}
button {
background-color: rgb(245, 66, 132);
padding: 33px;
}
button:hover {
background-color: #ffffff;
}
</style>
</head>
<body>
<h1> Welcome to my page! </h1>
<p>This is a simple webpage created as a learning exercise.</p>
<p>
<button onclick="hideUnhide(paragraph1)">Click to see a message!</button>
</p>
<p id="paragraph1">Welcome to the world of coding!</p>
<script>
function hideUnhide(id){
const p1 = document.getElementById(id);
if (p1.style.display == "none"){
p1.style.display = "block";
}
else {
p1.style.display = "none";
}
}
</script>
</body>
</html>
我是编程新手，正在上课。我尝试了 5 种不同的方法，但每次都不允许单击功能显示消息。我在notepad ++和vs code中尝试过。我在这里做错了什么？这是我最后一次尝试，我应该保存每个版本，这样我就可以询问每个版本，但在这个版本中，我按照 YouTube 视频中的按钮指示逐字操作，视频中有人在 VS Code 中做了同样的事情，但它不起作用，但他们有它在视频工作中。
您的 getElementById 不应该有变量，而应该有 id 名称。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Greeting Page</title>
<style>
h1 {
font-size: 14pt;
text-align: center;
}
body {
background-color: #eec0c8;
font-family: Georgia;
}
button {
background-color: rgb(245, 66, 132);
padding: 33px;
}
button:hover {
background-color: #ffffff;
}
</style>
</head>
<body>
<h1> Welcome to my page! </h1>
<p>This is a simple webpage created as a learning exercise.</p>
<p>
<button onclick="hideUnhide(paragraph1)">Click to see a message!</button>
</p>
<p id="paragraph1">Welcome to the world of coding!</p>
<script>
function hideUnhide(id) {
const p1 = document.getElementById("paragraph1");
if (p1.style.display === "none") {
p1.style.display = "block";
}
else {
p1.style.display = "none";
}
}
</script>
</body>
</html>