下面是我的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";});
这是在脚本标签中编写的带有JavaScript代码的HTML代码
<!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-属性获取元素。因此，对".button"one_answers".close"元素使用document.querySelector()方法，例如：
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代码中将"class"更改为"id"，这样您就不会再有任何问题了。
或者你可以使用
getElementsByClassName('.button')[0].addEventListener
在您的脚本中而不是
这两个选项中的任何一个都可以解决您的问题
您确定js文件的路径是正确的吗？其次，您是否尝试插入一个阻止默认事件来阻止正常的点击功能？否则，你代码的所有其他部分都可能无法启动