Author: John Au-Yeung

Sometimes, we want to get text for element without children text with JavaScript.

In this article, we’ll look at how to get text for element without children text with JavaScript.

How to get text for element without children text with JavaScript?

To get text for element without children text with JavaScript, we can use the jQuery, contents method.

For instance, we write:

<div id='mydiv'>
  some text here
  <div>
    text for inner div
  </div>
</div>

to add some divs with text.

Then we write:

const texts = $('#mydiv').contents().filter((i, el) => el.nodeType === 3).text()
console.log(texts)

We select the parent div with $('#mydiv').

Then we get the contents of the div with contents.

And then we call filter to return the items with nodeType 3.

Finally, we get the text of the node with text.

As a result, texts is ' some text here'.

Conclusion

To get text for element without children text with JavaScript, we can use the jQuery, contents method.

Sometimes, we want to get max width of child divs with JavaScript.

In this article, we’ll look at how to get max width of child divs with JavaScript.

How to get max width of child divs with JavaScript?

To get max width of child divs with JavaScript, we can select all the divs, spread them into an array, and then get their widths using the clientWidth property with the array map method.

Then we use Math.max to get the max width.

For instance, we write:

<div id="wrapper">
  <div class="image"><img src="https://picsum.photos/180/300
"></div>
  <div class="image"><img src="https://picsum.photos/220/300
"></div>
  <div class="image"><img src="https://picsum.photos/230/300
"></div>
  <div class="image"><img src="https://picsum.photos/100/100
"></div>
  <div class="image"><img src="https://picsum.photos/150/300
"></div>
  <div class="image"><img src="https://picsum.photos/250/300
"></div>
</div>

to add divs with images.

Then we write:

window.onload = () => {
  const widths = [...document.querySelectorAll('.image')].map(i => i.clientWidth)
  const maxWidth = Math.max(...widths)
  console.log(maxWidth)
}

to get the divs with class image with querySelectorAll.

Then we spread them into an array and use map with a callback to return their clientWidth, which is the width of each div.

Next, we call Math.max with the widths array spread into it as arguments.

Therefore, we see that maxWidth is 253.

Conclusion

To get max width of child divs with JavaScript, we can select all the divs, spread them into an array, and then get their widths using the clientWidth property with the array map method.

Then we use Math.max to get the max width.

Sometimes, we want to change a property on an object without mutating it with JavaScript.

In this article, we’ll look at how to change a property on an object without mutating it with JavaScript.

How to change a property on an object without mutating it with JavaScript?

To change a property on an object without mutating it with JavaScript, we can use the object spread operator.

For instance, we write:

const additions = {
  x: "Bye"
}
const a = {
  x: "Hi",
  y: "Test"
}
const b = {
  ...a,
  ...additions
}
console.log(b)

We create the b object by merging the entries of a with the entries of additions.

The entries that are merged in later overrides the ones that are merged in earlier if they have the same key.

So b.x is 'Bye'.

Therefore, b is {x: 'Bye', y: 'Test'}.

Conclusion

To change a property on an object without mutating it with JavaScript, we can use the object spread operator.

Sometimes, we want to add HTML button click event handlers with JavaScript.

In this article, we’ll look at how to add HTML button click event handlers with JavaScript.

How to add HTML button click event handlers with JavaScript?

To add HTML button click event handlers with JavaScript, we can call addEventListener on the button.

For instance, we write:

<input type="button" id="myButton" value="Add"/>

to add a button.

Then we write:

const myBtn = document.getElementById('myButton');
myBtn.addEventListener('click', (event) => {
  console.log('clicked')
});

We select the button with document.getElementById.

Then we call addEventListener with 'click' and the click event handler respectively.

Therefore, when we click on the button, we see 'clicked' logged.

Conclusion

To add HTML button click event handlers with JavaScript, we can call addEventListener on the button.

Sometimes, we want to play videos only when visible with HTML5 and JavaScript.

In this article, we’ll look at how to play videos only when visible with HTML5 and JavaScript.

How to play videos only when visible with HTML5 and JavaScript?

To play videos only when visible with HTML5 and JavaScript, we can use the Intersection Observer to check if the video is completely in the screen.

For instance, we write:

<video src='https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4' autoplay="autoplay" controls style='height: 200px'></video>

to add a video element with autoplay enabled.

Then we write:

const video = document.querySelector('video');
let isPaused = false;
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.intersectionRatio !== 1 && !video.paused) {
      video.pause();
      isPaused = true;
    } else if (isPaused) {
      video.play();
      isPaused = false
    }
  });
}, {
  threshold: 1
});
observer.observe(video);

to get the video with document.querySelector.

Then we create a new IntersectionObserver instance with a callback that checks if the video is fully in the screen and isn’t paused with entry.intersectionRatio !== 1 && !video.paused.

If both are true, then we pause the video.

Otherwise, we play the video.

Then we call observer.observer to watch when the video is in the screen.

Conclusion

To play videos only when visible with HTML5 and JavaScript, we can use the Intersection Observer to check if the video is completely in the screen.