Category: JavaScript

Sometimes, we want to add a custom upload button with JavaScript.

In this article, we’ll look at how to add a custom upload button with JavaScript.

How to add a custom upload button with JavaScript?

To add a custom upload button with JavaScript, we can add a hidden file input and then call click on it to open it.

For instance, we write:

<input type='file' style='display: none'>
<button>
  open
</button>

to add a file input and a button.

Then we write:

const input = document.querySelector('input');
const button = document.querySelector('button');
button.onclick = () => {
  input.click()
}

to select the input and button with querySelector.

Then we set button.onclick to a function that calls input.click to open the file selection dialog.

Conclusion

To add a custom upload button with JavaScript, we can add a hidden file input and then call click on it to open it.

Sometimes, we want to remove illegal characters from a file name but leave spaces with JavaScript.

In this article, we’ll look at how to remove illegal characters from a file name but leave spaces with JavaScript.

How to remove illegal characters from a file name but leave spaces with JavaScript?

To remove illegal characters from a file name but leave spaces with JavaScript, we can use the string replace method.

For instance, we write:

const filename = "f?:i/le>  n%a|m\\e.ext";
const fixedFilename = filename.replace(/[/\\?%*:|"<>]/g, '');
console.log(fixedFilename);

to call filename.replace with a regex that matches all instances of all the characters we want to remove.

Then we remove them by replacing them with empty strings.

Therefore, fixedFilename is 'file name.ext'.

Conclusion

To remove illegal characters from a file name but leave spaces with JavaScript, we can use the string replace method.

Sometimes, we want to add white space to left of a string with JavaScript.

In this article, we’ll look at how to add white space to left of a string with JavaScript.

How to add white space to left of a string with JavaScript?

To add white space to left of a string with JavaScript, we can use the string padStart method.

For instance, we write:

const str = 'blah'
const paddedStr = str.padStart(10, ' ')
console.log(paddedStr)

to call str.padStart with 10 and ' ' to pad the string to length 10 by prepending spaces to the string.

Therefore, paddedStr is ' blah'.

Conclusion

To add white space to left of a string with JavaScript, we can use the string padStart method.

Sometimes, we want to get the parent element of a selected text with JavaScript.

In this article, we’ll look at how to get the parent element of a selected text with JavaScript.

How to get the parent element of a selected text with JavaScript?

To get the parent element of a selected text with JavaScript, we can use the getSelection method.

For instance, we write:

<button>
  get selection
</button>
<div>
  <section>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </section>
</div>

to add a button and some text.

Then we write:

const button = document.querySelector('button')
button.onclick = () => {
  console.log(window.getSelection().anchorNode.parentElement)
}

to select the button with querySelector.

And then we set the button.onclick property to a function that gets the selection with window.getSelection.

Then we use the anchorNode.parentElement property from the returned object to get the parent node of the selected text.

Conclusion

To get the parent element of a selected text with JavaScript, we can use the getSelection method.

Sometimes, we want to add click event handler to dynamically added button with JavaScript.

In this article, we’ll look at how to add click event handler to dynamically added button with JavaScript.

How to add click event handler to dynamically added button with JavaScript?

To add click event handler to dynamically added button with JavaScript, we can set the buttons’ onclick property to the event handler function.

For instance, we write:

const button = document.createElement('button')
button.textContent = 'click me'
button.onclick = () => {
  console.log('clicked')
}

document.body.appendChild(button)

to create the button with createElement.

Then we set its textContent to 'click me'.

Next, we set the onclick property to the click event handler.

Finally, we call document.body.appendChild with button to add the button as the child of the body element.

As a result, when we click on the button, we see 'clicked' logged.

Conclusion

To add click event handler to dynamically added button with JavaScript, we can set the buttons’ onclick property to the event handler function.