JS - QuerySelector null on element that does exist

Question

I've searched for about a good 1 hour and found nothing. I've attempted the 'fixes' I've come across and they do not work on my code. Albeit that the code provided works on its own file, it does not work within mine.

Html:

<div class="result">Pizza</div>
    <div class="choices">
        <button id="rock">Rock</button>
        <button id="paper">Paper</button>
        <button id="scissors">Scissors</button>
   </div>
</body>
</html>

JS:

    let buttons = document.getElementById("#rock").addEventListener("click");
    let rock = document.querySelector('#rock');

//check if id exists
    let str,
    element = document.getElementById('.choices #rock');
    if(element != null){
        str = elemen.value;
        console.log(str);
    }else{
        str = null;
        console.log(str);
    }

if it need be, I'll post my entire code. Hopefully, this is enough to replicate the error on your end.

Thanks in advance!

The `.getElementById()` function expects **just** the "id" value to search for, and that's **without** the "#". — Pointy, Jan 22 '18 at 20:20
Interesting enough, I attempted both with and without the '#'. I've yet to have to get it too accept it. It may be due to the fact that i haven't slept for 15 hours, but hey. Thanks for the help — Azhorabai, Jan 22 '18 at 20:23
`document.getElementById("#rock").addEventListener("click");` — epascarello, Jan 22 '18 at 20:27
There is no way that code works in any other file since that is not how getElementById works. Not sure how to explain it other than it just uses an ID, not a selector. The `addEventListener` line makes no sense since it does nothing, where is the function? — epascarello, Jan 22 '18 at 20:30
That's so interesting! Didn't realize that addEventListener required a 'function' or something of the sort. I've read over the post at the link you provided and the weird part is that my code does have the id's but when i call them via query select or getElementById, it still returns null. I must be doing something wrong, I'm sorry for being this dull. — Azhorabai, Jan 22 '18 at 20:41

Denys Séguret · Answer 1 · 2018-01-22T20:21:33.533

1

getElementById takes only an id as argument, not a query.

Either use

element = document.querySelector('.choices #rock');

or

element = document.getElementById('rock');

The second form is much cleaner as only one element can have a given id. Keep composite query finished by an id to the very rare cases you want to apply it to the case the element may be or not be inside an another one.

edited Jan 22 '18 at 20:21

answered Jan 22 '18 at 20:20

Denys Séguret

335,116
73
720
697

Interesting enough, I attempted both with and without the '#'. I've yet to have to get it too accept it. It may be due to the fact that i haven't slept for 15 hours, but hey. Thanks for the help – Azhorabai Jan 22 '18 at 20:24

score 1 · Answer 2 · answered Jan 22 '18 at 20:56

You have some typos, but you are also missing a load or DOMContentLoaded listener. You are likely querying for the element before it exists on the page:

document.addEventListener('DOMContentLoaded', function() {
  var rock = document.querySelector('#rock');

  var str;

  if (rock) {
    str = rock.value;
    console.log(str);
  } else {
    str = null;
    console.log(str);
  }
});

<div class="choices">
  <button id="rock" value="rock">Rock</button>
  <button id="paper" value="paper">Paper</button>
  <button id="scissors" value="scissors">Scissors</button>
</div>

score 0 · Answer 3 · answered Jan 22 '18 at 20:26

I don't understand the logic of your code, but you need to change the way you're getting the elements.

You're trying to get element by id, however, what you really want is get the element using querySelector.

Check on the changes I did on your code.

let buttons = document.getElementById("rock").addEventListener("click", function() {});
let rock = document.querySelector('#rock');

//check if id exists
let str;
let element = document.querySelector('.choices #rock');

if (element != null) {
  str = element.value;
  console.log(str);
} else {
  str = null;
  console.log(str);
}

<div class="choices">
  <button id="rock" value="rock">Rock</button>
  <button id="paper" value="paper">Paper</button>
  <button id="scissors" value="scissors">Scissors</button>
</div>

I run the snippet and it works, but I attempt it in my file and it still returns null. I'm puzzled by this. I see that you added function to my listener, you added the 't' to my element and added the values. Am I missing anything else? I apologize, I haven't slept for 19 hours. *update* And also the let str; and let element — Azhorabai, Jan 22 '18 at 20:38

JS - QuerySelector null on element that does exist

3 Answers3