JavaScript code neither working within script tag in HTML code nor in an external JS file

Question

Below is my HTML code and the javascript part in the tag is not working. Even if I paste the JavaScript code to external JS file - script.js, it's not working. I tried writing it separately in script.js like this, but that also did not work for me:-

document.getElementById(".button").addEventListener("click", function(){
    document.querySelector(".popup").style.display = "flex";});
document.getElementById(".close").addEventListener("click", function(){
    document.querySelector(".popup").style.display="none";});

here is the HTML code with JavaScript code written within script tags

<!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>

"Does not work" is not a great bug report. Can you please explain what is not happening that you think should? — Heretic Monkey
– Heretic Monkey, Commented May 6, 2020 at 16:46
You have a syntax error in your code. getElementById takes the value of an element's ID attribute. There is no element in your code with an ID of ".button" or "button" for that matter. Note also your option elements are incorrectly closed </option>option> is invalid HTML. — Heretic Monkey
– Heretic Monkey, Commented May 6, 2020 at 16:49

royarisse · Accepted Answer · 2020-05-06 16:47:13Z

2

The document.getElementById() method only gets elements by their id-attribute. Therefore use the document.querySelector() method for the ".button" and ".close" elements, e.g.:

document.querySelector(".button").addEventListener("click", function() {
  document.querySelector(".popup").style.display = "flex";
});
document.querySelector(".close").addEventListener("click", function() {
  document.querySelector(".popup").style.display="none";
});

answered May 6, 2020 at 16:47

royarisse

3542 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

simran gupta Over a year ago

Ohh , Thank you so much !

simran gupta Over a year ago

It worked when i used querySelector instead of getElementByID()

Ganesh Thorat Over a year ago

Perfect +1 You should check if the element is not null before adding an event listener. :)

Satnam Singh · Accepted Answer · 2020-05-06 16:54:16Z

0

Its because you have mistaken in writing javascript code.

You are passing a classname .button to getElementById() method. Replace it with querySelector() method. Like this:-

document.querySelect(".button").addEventListener("click", function(){
       document.querySelector(".popup").style.display = "flex";});
document.querySelector(".close").addEventListener("click", function(){
       document.querySelector(".popup").style.display="none";});

answered May 6, 2020 at 16:54

Satnam Singh

3443 silver badges14 bronze badges

Comments

Bukoye · Accepted Answer · 2020-05-06 17:14:06Z

0

You are dealing with a class and not an id You can change your "class" to "id" in your html code and you shouldn't have any problem anymore

Or you can use,

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

In your script instead

Any of the two options will solve your problem

edited May 6, 2020 at 17:14

answered May 6, 2020 at 16:59

Bukoye

912 silver badges9 bronze badges

Comments

Emilio · Accepted Answer · 2020-05-06 16:49:03Z

-1

are you sure the path of the js file is correct? Secondly, have you tried to insert a prevent default event to prevent the normal click functionality? Otherwise all the other part of your code could neve been launched

edited May 6, 2020 at 16:49

answered May 6, 2020 at 16:43

Emilio

314 bronze badges

1 Comment

Heretic Monkey Over a year ago

Please wait until you have enough rep to comment; don't use answers to do so.

Collectives™ on Stack Overflow

JavaScript code neither working within script tag in HTML code nor in an external JS file

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related