JavaScript代码既不能在HTML代码中的脚本标签中工作,也不能在外部JS文件中工作。

问题描述 投票:0回答:1

下面是我的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>
javascript html
1个回答
2
投票

我试着在脚本中单独编写......。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";
});

0
投票

这是因为你在写javascript代码时犯了错误。

你传递的是一个类名 .buttongetElementById() 方法。用以下方法代替 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";});

0
投票

你处理的是一个类,而不是一个id,你可以在你的html代码中把 "类 "改成 "id",你就不会再有任何问题了。

或者你可以用。

getElementsByClassName('.button')[0].addEventListener

在你的脚本中,而不是

这两个选项中的任何一个都可以解决你的问题


-1
投票

你确定js文件的路径是正确的吗? 其次,你有没有尝试插入一个防止默认事件来防止正常的点击功能?否则,你的代码的其他部分就不可能被启动。

热门问题
推荐问题
最新问题