Author: John Au-Yeung

Sometimes, we want to get an element’s current onclick method’s contents with JavaScript.

In this article, we’ll look at how to get an element’s current onclick method’s contents with JavaScript.

How to get an element’s current onclick method’s contents with JavaScript?

To get an element’s current onclick method’s contents with JavaScript, we can use the onclick property.

For instance, we write:

<div>
  hello world
</div>

to add a div.

Then we write:

const div = document.querySelector("div")
div.onclick = () => {
  console.log('hello world')
}
console.log(div.onclick)

to select the div with querySelector.

And then we set div.onclick to a function.

Next, we log the content of div.onclick.

As a result, the console log logs

() => {
  console.log('hello world')
}

Conclusion

To get an element’s current onclick method’s contents with JavaScript, we can use the onclick property.

Sometimes, we want to get the text element content of an element with JavaScript.

In this article, we’ll look at how to get the text element content of an element with JavaScript.

How to get the text element content of an element with JavaScript?

To get the text element content of an element with JavaScript, we can use the childNodes to get the child nodes.

And then we use textContent property to get the text content.

For instance, we write:

<div>
  hello world
</div>

to add a div.

Then we write:

const [node] = document.querySelector("div").childNodes
console.log(node.textContent)

to select the div with querySelector and use the childNodes property to get the child nodes of it.

Then we get the first node with destructuring and get its textContent property to get the text in the node.

Conclusion

To get the text element content of an element with JavaScript, we can use the childNodes to get the child nodes.

And then we use textContent property to get the text content.

Sometimes, we want to listen to the play event on a HTML video element with JavaScript.

In this article, we’ll look at how to listen to the play event on a HTML video element with JavaScript.

How to listen to the play event on a HTML video element with JavaScript?

To listen to the play event on a HTML video element with JavaScript, can set onplay property of the video element to the event listener function.

For instance, we write:

<video src='https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4' controls></video>

to add a video.

Then we write:

const video = document.querySelector('video')
video.onplay = () => {
  console.log('playing')
}

to select the video element with querySelector.

Then we set video.onplay to a function that logs 'playing'.

Therefore, if the video is playing, 'playing' is logged.

Conclusion

To listen to the play event on a HTML video element with JavaScript, can set onplay property of the video element to the event listener function.

Sometimes, we want to render empty space in React and JavaScript.

In this article, we’ll look at how to render empty space in React and JavaScript.

How to render empty space in React and JavaScript?

To render empty space in React and JavaScript, we can put the character code for spaces into the code.

For instance, we write:

import React from "react";

export default function App() {
  return <>foo{"\u00a0\u00a0"}bar</>;
}

to add "\u00a0\u00a0" to add 2 spaces between foo and bar.

Conclusion

To render empty space in React and JavaScript, we can put the character code for spaces into the code.