Author: John Au-Yeung

One way to make a div visible or invisible is with the visibility property.

For instance, if we have a div:

<div>  
  hello world  
</div>

Then we can make it visible with:

const div = document.querySelector('div')  
div.style.visibility = 'visible'

And we can make it invisible with:

const div = document.querySelector('div')  
div.style.visibility = 'hidden'

Make a Div Visible and Invisible with JavaScript with the display Property

Another way to make a div visible or invisible is with the display property.

For instance, if we have a div:

<div>  
  hello world  
</div>

Then we can make it visible with:

const div = document.querySelector('div')  
div.style.display = 'inline';

to make the div display inline with other elements.

And we can write:

const div = document.querySelector('div')  
div.style.display = 'block';

to make it display in its own row.

And we can make it invisible with:

const div = document.querySelector('div')  
div.style.display = 'none';

To fix the “The play() request was interrupted by a call to pause()” error, we can check if the video is played or paused we can check if the video is paused before playing, and check if the video is playing before pausing it.

To do this, we write the following HTML:

<video width="400">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>
<button id='play'>
  play
</button>
<button id='pause'>
  pause
</button>

Then we write:

const video = document.querySelector('video')
const play = document.querySelector('#play')
const pause = document.querySelector('#pause')
let isPlaying = false;

video.onplaying = () => {
  isPlaying = true;
};

video.onpause = () => {
  isPlaying = false;
};

const playVid = () => {
  if (video.paused && !isPlaying) {
    video.play();
  }
}

const pauseVid = () => {
  if (!video.paused && isPlaying) {
    video.pause();
  }
}

play.addEventListener('click', playVid)
pause.addEventListener('click', pauseVid)

We get the video and button elements with document.querySelector .

Then we define the isPlaying variable which indicates whether the video is playing or not.

Then we set isPlaying to true when the video is playing in the onPlaying method.

And we set isPlaying to false when the video is playing in the onPlayingmethod.

Then we have the playVid function that checks if the video is paused with video.paused and isPlaying .

And if video.paused is true and isPlaying is false , we call video.play to play the video.

And if video.paused is false and isPlaying is true, we call video.pause to pause the video in the pauseVid function.

Finally, we call addEventListener on play and pause to add the functions as click event listener functions.

To set the date value of a date input with JavaScript, we create a date string in YYYY-MM-DD format, then we set the value property of the input to that date string.

For instance, if we have the following date input:

<input type='date'>

Then we write:

const input = document.querySelector('input')  
const dt = new Date(2021, 1, 1);  
const day = ("0" + dt.getDate()).slice(-2);  
const month = ("0" + (dt.getMonth() + 1)).slice(-2);  
const date = dt.getFullYear() + "-" + month + "-" + day;  
input.value = date

We get the input with document.querySelector .

Then we create the dt date with the Date constructor.

Next, we get the day and month with the getDate and getMonth methods respectively.

And we pad them both with a 0 before it and call slice with -2 to get the last 2 digits.

Next, we create the date string by concatenating the year, which we get from getFullYear , month and day joined together with dashes.

Finally, we set date to input.value .

Now we should see the date input set with the value of the date.

We can set the content property of each meta tag to change the content attribute value of each meta tag.

If we have the following meta tags:

<meta name='keywords'>  
<meta name='description'>

Then we can get the meta tags and change their contents by writing:

const meta = document.getElementsByTagName('meta')  
meta.keywords.content = "My new page keywords";  
meta.description.content = "My new page description"

We call document.getElementsByTagName with 'meta' to get both meta tags.

Then we set the meta tag with the name keywords by writing:

meta.keywords.content = "My new page keywords";

And we set the meta tag with the name description by writing:

meta.description.content = "My new page description"

Then we get:

<meta name="keywords" content="My new page keywords">  
<meta name="description" content="My new page description">

as a result.

We can add an image to the canvas with the drawImage method.

For instance, if we have the following canvas:

<canvas style='width: 300px; height: 300px'></canvas>

Then we can write the following JavaScript to draw an image in it:

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const baseImage = new Image();
baseImage.src = 'https://i.picsum.photos/id/441/200/300.jpg?hmac=QKMN_HV9XLlzyUWdanPyq2Qz8FJmYYH5Q0CjPACcnsI';
baseImage.onload = () => {
  context.drawImage(baseImage, 0, 0);
}

We get the canvas element with document.querySelector .

And then we call getContext to get the context object.

Next, we create an image element with the Image constructor to create an image.

We set the src property to the URL of the image.

And then we set the baseImage.onload property to a function that calls context.drawImage with baseImage and the x and y coordinates of the top left corner.