jQuery cannot find div with ID

Question

I am trying to use jQuery to change the display style of an element to none (the elements current display style is block).

I have the following HTML:


<div id="loginModal">
   <div id="modalContent">
      <h1>Welcome To Crunch</h1>
      <br/>
      <span id="codeValidator">Please Enter A Valid Code</span><br/>
      <input type="text" id="codeInput" placeholder="Enter Room Code" /><br/>
      <input type="text" id="usernameInput" placeholder="Enter Username" /><br/>
      <button id="joinRoom">Join Room</button>
   </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="app.js"></script>

and the following Javascript in app.js:

$('#joinRoom').click(() => {
    $('#loginModal').style.display = 'none';
});

However whenever I click on the join room button I get the following error: app.js:4 Uncaught TypeError: Cannot set property 'display' of undefined

Why is this happening and how can I fix it?

jQuery object !== DOM element. Try `.css('display', 'none')` — fen1x, Nov 23 '20 at 06:33

score 3 · Answer 1 · answered Nov 23 '20 at 06:34

You are trying to communicate with object jquery, not with DOM element. This means that the syntax should be jquery, not javascript!

try this it:

$('#joinRoom').click(() => {
    $('#loginModal').css('display', 'none');
});

$('#joinRoom').click(() => {
    $('#loginModal').css('display', 'none');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loginModal">
   <div id="modalContent">
      <h1>Welcome To Crunch</h1>
      <br/>
      <span id="codeValidator">Please Enter A Valid Code</span><br/>
      <input type="text" id="codeInput" placeholder="Enter Room Code" /><br/>
      <input type="text" id="usernameInput" placeholder="Enter Username" /><br/>
      <button id="joinRoom">Join Room</button>
   </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="app.js"></script>

I'm sure you're not an idiot :) But all people make mistakes. I was glad to help! — s.kuznetsov, Nov 23 '20 at 06:42

score 2 · Accepted Answer · answered Nov 23 '20 at 08:33

You are mixing DOM element with jQuery .Since you are using jQuery library you can just use show() and hide() methods Here is simple clean modification

$('#joinRoom').click(() => {
    $('#loginModal').hide()
});

About error: .style.display = 'none' will need a DOM element . also you may want to look at toggle() method

score 0 · Answer 3 · answered Nov 23 '20 at 06:45

From your code, I can find that you want to change css of particular div. For changing css property of dom element, you can use .css() function of dom element.

In below example, you can see the difference in callback function of click function of dom element having '#joinRoom' as id.

$(document).ready(function() {
  $('#joinRoom').click(function() {
    // change your css changing code line with below line
    $('#loginModal').css('display', 'none');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="loginModal">
  <div id="modalContent">
    <h1>Welcome To Crunch</h1>
    <br/>
    <span id="codeValidator">Please Enter A Valid Code</span><br/>
    <input type="text" id="codeInput" placeholder="Enter Room Code" /><br/>
    <input type="text" id="usernameInput" placeholder="Enter Username" /><br/>
    <button id="joinRoom">Join Room</button>
  </div>
</div>

score 0 · Answer 4 · answered Nov 23 '20 at 06:58

0

$(document).ready(function() {
  $('#joinRoom').click(() => {
    $('#loginModal').css('display', 'none');
  });
});

Try this way.

answered Nov 23 '20 at 06:58

Ipsita

111
2
5

jQuery cannot find div with ID

4 Answers4