Author: John Au-Yeung

Sometimes, we want to replace local storage data for an already existing key with JavaScript.

In this article, we’ll look at how to replace local storage data for an already existing key with JavaScript.

How to replace local storage data for an already existing key with JavaScript?

To replace local storage data for an already existing key with JavaScript, we can get the value with getItem, change the returned value, and then save it with setItem.

For instance, we write:

localStorage.setItem('string', 'foo')
const s = localStorage.getItem('string')
localStorage.setItem('string', `${s}bar`)

We call setItem with the key and value to add an entry with key string and value 'foo'.

Then we get the item with key string with getitem.

Next, we call setItem again with the same key and a different value to save the value for the same key.

Conclusion

To replace local storage data for an already existing key with JavaScript, we can get the value with getItem, change the returned value, and then save it with setItem.

Sometimes, we want to add sources to HTML5 video in JavaScript.

In this article, we’ll look at how to add sources to HTML5 video in JavaScript.

How to add sources to HTML5 video in JavaScript?

To add sources to HTML5 video in JavaScript, we can create a new source element with createElement.

For instance we write:

const source = document.createElement('source');
source.src = 'http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv';
source.type = 'video/ogg';

const video = document.createElement('video');
video.controls = true
video.appendChild(source);

document.body.appendChild(video);

We call createElement with 'source' to create a source element.

Then we set the src and type attributes of it by setting their respective properties.

Next, we call createElement again to create a video element.

And we set the controls property to true to set the controls attribute to true.

Then we append the source element as the child of video with appendChild.

And then we append the video element as the child of body with document.body.appendChild.

Conclusion

To add sources to HTML5 video in JavaScript, we can create a new source element with createElement.

Sometimes, we want to prevent "Invalid date" with Moment.js and JavaScript.

In this article, we’ll look at how to prevent "Invalid date" with Moment.js and JavaScript.

How to prevent "Invalid date" with Moment.js and JavaScript?

To prevent "Invalid date" with Moment.js and JavaScript, we can check if a date is valid with the isValid method.

For instance, we write:

console.log(moment('2022-01-01').isValid())
console.log(moment('abc').isValid())

to create moment objects with a valid and invalid date string.

Then we can call inValid on each to check if they’re valid dates.

Therefore, the first log should log true since it’s a valid and the 2nd one should log false since it’s not.

Conclusion

To prevent "Invalid date" with Moment.js and JavaScript, we can check if a date is valid with the isValid method.

Sometimes, we want to pass text input to a click handler with JavaScript.

In this article, we’ll look at how to pass text input to a click handler with JavaScript.

How to pass text input to a click handler with JavaScript?

To pass text input to a click handler with JavaScript, we can select it and reference it in the click handler.

For instance, we write:

<form>
  <input type="text" name="name" />
  <input type="button" value='submit' />
</form>

to add a form with a text and button input.

Then we write:

const button = document.querySelector('input[type="button"]')
const input = document.querySelector('input[type="text"]')

button.onclick = () => {
  console.log(input.value)
}

to select the button and the text input with querySelector.

Then we set button.onclick to a function that logs the input.value property which has the text input’s value.

Conclusion

To pass text input to a click handler with JavaScript, we can select it and reference it in the click handler.