Код JavaScript не работает внутри тега сценария в коде HTML или во внешнем файле JS - PullRequest
Новая
       0

Код JavaScript не работает внутри тега сценария в коде HTML или во внешнем файле JS

0 голосов
/ 06 мая 2020

Ниже мой код HTML, а часть javascript в теге не работает. Даже если я вставлю код JavaScript во внешний файл JS - script. js, он не работает. Я пробовал писать его отдельно в скрипте. 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>

Ответы [ 4 ]

2 голосов
/ 06 мая 2020

Метод 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 голосов
/ 06 мая 2020

Вы имеете дело с классом, а не с идентификатором. Вы можете изменить свой "class" на "id" в своем html коде, и у вас больше не должно возникнуть проблем

Или вы можете использовать, 

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

Вместо этого в вашем скрипте

Любой из двух вариантов решит вашу проблему

0 голосов
/ 06 мая 2020

Это потому, что вы ошиблись при написании кода 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";});
0 голосов
/ 06 мая 2020

вы уверены, что путь к файлу js правильный? Во-вторых, пытались ли вы вставить событие предотвращения по умолчанию, чтобы предотвратить нормальную функциональность щелчка? В противном случае вся остальная часть вашего кода не могла бы быть запущена

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...