Convert simple jQuery to plain JavaScript

Question

I'm having problem trying to convert this piece of code from jQuery into pure JavaScript.

The script is

if($('#item-1').find('#player').length == 1)
{
    innerHTML = "You Won!!!";
} else {
    innerHTML = "You Lose!!!";
}

Do I have to use getElementById?

if(document.getElementById("#item-1 #player").length == 1)

Tushar · Accepted Answer · 2016-04-02 05:17:38Z

2

getElementById accepts the ID of single element without #. You need querySelector.

document.querySelector('#item-1 #player').length

Also, as ID is unique there is no need of descendant selector. The ID of the element can directly be used.

document.getElementById('player')

Code:

innerHtml = document.getElementById('player') ? 'You won!!!' : 'You lose!!!';

More complex:

innerHtml = 'You ' + (document.getElementById('player') ? 'won' : 'lose') + '!!!';

edited Apr 2, 2016 at 5:17

answered Apr 2, 2016 at 5:05

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

1 Comment

zzzzBov Over a year ago

"Also, as ID is unique there is no need of descendant selector." actually given the code it's likely that one element may be within the other at different times (it's very easy to move DOM nodes), which would mean that document.querySelector('#item-1 #player') would be appropriate for checking state, where document.getElementById('player') would not.

shivgre · Accepted Answer · 2016-04-02 05:44:02Z

0

Use querySelector :

//evaluates to true if length > 0
if(document.querySelectorAll('#item-1 #player').length)
{
    innerHTML = "You Won!!!";
} else {
    innerHTML = "You Lose!!!";
}

or in 1 line code :

var innerHtml = document.querySelectorAll('#item-1 #player').length ? 'You Won!!!' : 'You Lose!!!';

edited Apr 2, 2016 at 5:44

answered Apr 2, 2016 at 5:31

shivgre

1,1732 gold badges13 silver badges29 bronze badges

1 Comment

zzzzBov Over a year ago

document.querySelector will return a single node. document.querySelectorAll will return a collection of nodes. The former doesn't have a length property.

Collectives™ on Stack Overflow

Convert simple jQuery to plain JavaScript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related