下面是我的HTML代码，标签中的javascript部分无法使用。即使我把JavaScript代码粘贴到外部JS文件--script.js中，也无法使用。我试过像这样在script.js中单独写，但也没有用。
document.getElementById(".button").addEventListener("click", function(){
document.querySelector(".popup").style.display = "flex";});
document.getElementById(".close").addEventListener("click", function(){
document.querySelector(".popup").style.display="none";});
这里是HTML代码，JavaScript代码写在脚本标签里。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="container">
<h1>Popup for adding/editing Expertise details</h1>
<a href="#" class="button">Add/Edit</a>
</div>
<div class="popup">
<div class="popup-content">
<div class="register">
<form method="post" id="register" action="">
<label> Expertise Area: </label><br>
<input type="text" name="Fname" id="name" placeholder="Enter your Expertise Area"><br><br>
<label> Experience: </label><br>
<label for="quantity">No. of months:</label>
<input type="number" id="quantity" name="quantity" min="1" max="11">
<label for="quantity">No. of years:</label>
<input type="number" id="quantity" name="quantity" min="1" max="50"><br><br>
<label> Rates </label>
<label> Remote: </label><br>
<select id="ph">
<option>per hour</option>option>
<option>per topic</option>option>
<option>per chapter</option>option>
</select>
<label for="quantity">Amount in Rs.:</label>
<input type="number" id="quantity" name="quantity">
<label> Center: </label><br>
<select id="ph">
<option>per week</option>option>
<option>per month</option>option>
</select>
<label for="quantity">Amount in Rs.:</label>
<input type="number" id="quantity" name="quantity">
<label> Learner's Place: </label><br>
<select id="ph">
<option>per class</option>option>
<option>per hour</option>option>
</select>
<label for="quantity">Amount in Rs.:</label>
<input type="number" id="quantity" name="quantity"><br>
<label> My Place: </label><br>
<select id="ph">
<option>per class</option>option>
<option>per hour</option>option>
</select>
<label for="quantity">Amount in Rs.:</label>
<input type="number" id="quantity" name="quantity"><br><br>
<a href="#" class="button">Submit</a>
<img src="close.png" class="close" alt="Close">
</form>
</div>
</div>
</div>
<script>
document.getElementById(".button").addEventListener("click", function() {
document.querySelector(".popup").style.display = "flex";
});
document.getElementById(".close").addEventListener("click", function() {
document.querySelector(".popup").style.display = "none";
});
</script>
</body>
</html>我试着在脚本中单独编写......。document.getElementById() 方法只通过元素的 id-属性。因此使用 document.querySelector() 的方法，如".button "和".close "元素。
document.querySelector(".button").addEventListener("click", function() {
document.querySelector(".popup").style.display = "flex";
});
document.querySelector(".close").addEventListener("click", function() {
document.querySelector(".popup").style.display="none";
});
这是因为你在写javascript代码时犯了错误。
你传递的是一个类名 .button 到 getElementById() 方法。用以下方法代替 querySelector() 方法。像这样：-
document.querySelect(".button").addEventListener("click", function(){
document.querySelector(".popup").style.display = "flex";});
document.querySelector(".close").addEventListener("click", function(){
document.querySelector(".popup").style.display="none";});
你处理的是一个类，而不是一个id，你可以在你的html代码中把 "类 "改成 "id"，你就不会再有任何问题了。
或者你可以用。
getElementsByClassName('.button')[0].addEventListener
在你的脚本中，而不是
这两个选项中的任何一个都可以解决你的问题
你确定js文件的路径是正确的吗？ 其次，你有没有尝试插入一个防止默认事件来防止正常的点击功能？否则，你的代码的其他部分就不可能被启动。