Category: JavaScript Answers

To check if a div does not exist with JavaScript, we can check if the document.getElementById or document.querySelector returns a null value.

For instance, we can write:

if (!document.getElementById("given-id")) {
  console.log('not exist')
}

if (!document.querySelector("#given-id")) {
  console.log('not exist')
}

We have 2 if statements.

The first one calls document.getElementById to check if an element with the ID given-id exists.

The 2nd one calls document.querySelector to do the same thing.

They both log 'not exist' since they don’t exist.

Also, we can write:

if (document.getElementById("given-id") === null) {
  console.log('not exist')
}

if (document.querySelector("#given-id") === null) {
  console.log('not exist')
}

to do the same thing by checking explicitly if null is returned.

We should get the same result as before the elements with ID given-id doesn’t exist.

Sometimes, we want to convert an integer array to a string array in JavaScript.

In this article, we’ll look at how to convert an integer array to a string array in JavaScript.

Convert an Integer Array into a String Array in JavaScript

To convert an integer array to a string array in JavaScript, we can use the map method to do so.

For instance, we can write:

const arr = [1, 2, 3, 4, 5];
const strArr = arr.map(String)
console.log(strArr)

to create the arr number array.

Then we call map on arr with the String function as its callback.

The String function takes in the item we want to convert into a string and return the string version of the argument as a result.

Therefore strArr is:

["1", "2", "3", "4", "5"]

Conclusion

To convert an integer array to a string array in JavaScript, we can use the map method to do so.

To check if two JavaScript dates have the same date info, we can use the valueOf or getTime method to return the timestamp value of both dates, which are numbers.

Then we can compare the returned timestamp numbers with === .

For instance, we can write:

const a = new Date(1995, 11, 17);  
const b = new Date(1995, 11, 17);  
console.log(a.getTime() === b.getTime())

Then the console log logs true since a and b have the same timestamp number.

Also, we can use valueOf by writing:

const a = new Date(1995, 11, 17);  
const b = new Date(1995, 11, 17);  
console.log(a.valueOf() === b.valueOf())

And we get the same result as the previous example.

To remove only the parent element and not its child elements in JavaScript, we can create a new fragment that has the element itself removed but with the children kept.

Then we can replace the element with the fragment which has the child elements.

For instance, if we have:

<div>  
  pre text  
  <div class="remove-just-this">  
    <p>child foo</p>  
    <p>child bar</p>  
    nested text  
  </div>  
  post text  
</div>

and we want to remove the div with class remove-just-this , then we can write:

const fragment = document.createDocumentFragment();  
const element = document.querySelector('.remove-just-this')  
while (element.firstChild) {  
  fragment.appendChild(element.firstChild);  
}  
element.parentNode.replaceChild(fragment, element);

We call document.createDocumentFragment to create a fragment.

Then we get the div with class remove-just-this with document.querySelector .

Then we get the children of the div and append them to the fragment with:

while (element.firstChild) {  
  fragment.appendChild(element.firstChild);  
}

And finally, we call element.parentNode.replaceChild to replace the element with the fragment .

Now we get:

<div>  
  pre text  
    
    <p>child foo</p>  
    <p>child bar</p>  
    nested text  
    
  post text  
</div>

as a result.

To detect when a YouTube video finishes playing with JavaScript, we can set the events.onReady and events.onStateChange methods in the object we pass into the YT.Player constructor.

For instance, we can write the following HTML:

<div id="player"></div>

Then we can add a video into the div with the YouTube API by writing:

const tag = document.createElement("script");
tag.id = "iframe-demo";
tag.src = "https://www.youtube.com/iframe_api";
const [firstScriptTag] = document.getElementsByTagName("script");
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
let player;

window.onPlayerReady = (event) => {
  event.target.playVideo();
};

window.onPlayerStateChange = (event) => {
  if (event.data === 0) {
    console.log("done");
  }
};

window.onYouTubeIframeAPIReady = () => {
  player = new window.YT.Player("player", {
    width: 200,
    height: 100,
    videoId: "M7lc1UVf-VE",
    events: {
      onReady: window.onPlayerReady,
      onStateChange: window.onPlayerStateChange
    }
  });
};

We add the YouTube script with:

const tag = document.createElement("script");
tag.id = "iframe-demo";
tag.src = "https://www.youtube.com/iframe_api";
const [firstScriptTag] = document.getElementsByTagName("script");
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

Then we add the onPlayerReady method with:

window.onPlayerReady = (event) => {
  event.target.playVideo();
};

to play the video when the player is ready.

Then we have the onPlayerStateChange method that checks if event.data is 0.

If it is, then we know the video is done playing.

And finally, we have the onYouTubeIframeAPIReady method to create a YouTube player with the YT.Player constructor.

'player' is the ID of the div that houses the video.

width and height are the width and height.

videoId is the ID of the YouTube video to play.

And the events property have the event listeners for when the video player is ready and when the video player state changes, which are onReady and onStateChange respectively.