Author: John Au-Yeung

We can listen to the wheel event and remove focus on the input when we start scrolling on the mouse wheel.

For instance, if we have the following HTML:

<input type='number'>

Then we can listen to the wheel event by writing:

document.addEventListener("wheel", (event) => {  
  if (document.activeElement.type === "number") {  
    document.activeElement.blur();  
  }  
});

We check if the type attribute of the element we focused on is set to number with:

document.activeElement.type === "number"

If it is, then we call document.activeElement.blur() to remove focus from it.

Now when we try to scroll with the scroll wheel, the browser will move focus away from the input.

We can use selectors for selecting elements with specific attributes.

For instance, if we have the following HTML:

<input type='checkbox' value='apple'> apple
<input type='checkbox' value='orange'> orange
<input type='radio' value='grape'> grape

Then we can select all the checkboxes that have a value attribute set by writing:

const inputs = document.querySelectorAll('input[value][type="checkbox"]:not([value=""])');
console.log(inputs)

input gets all the input elements

[value] narrows down to inputs with the value attribute set.

[type=”checkbox”] means we get the inputs with type attribute set to checkbox .

And :not([value=””] means we get the inputs with value not set to an empty string.

Therefore, inputs should be the checkboxes in the HTML.

We can call appendChild on a DOM node to append a child node to a given DOM node.

For instance, if we have the given div:

<div id='test'>  
  foo  
</div>

Then we can append another div as a child of the div above with appendChild .

To do this, we write:

const child = document.createElement('div');  
child.innerHTML = 'bar';  
const {  
  firstChild  
} = child;  
document.getElementById('test').appendChild(firstChild);

We call documenbt.createElement to creat the child div element.

Then we set its innerHTML to the content we want inside the div.

Next, we get the firstChild from child .

And then we call appendChild on the div with ID test with firstChild to append it as another child node of the div with ID test .

Now we see ‘foo bar’ is displayed.

Append a String to the innerHTML Value

We can also just append a string to the innerHTML directly.

So if we have:

<div id='test'>  
  foo  
</div>

Then we can use the += operator to append a string into the div with ID test by writing:

document.getElementById('test').innerHTML += ' bar'

And we get the same result as the previous example.

One way to remove part of a string before a colon is to use the JavaScript string’s substring method.

For instance, we can write:

const str = "Abc: Lorem ipsum sit amet";
const newStr = str.substring(str.indexOf(":") + 1);
console.log(newStr)

We use the indexOf method to get the index of the first colon.

Then we add 1 to that pass that into substring to get the substring after the first colon.

Therefore, newStr is 'Lorem ipsum sit amet’ .

Use the Array.prototype.split and Array.prototype.pop Methods

Another way to remove the part of a string before the colon is to use the JavaScript array’s split and pop methods.

To do this, we write:

const str = "Abc: Lorem ipsum sit amet";
const newStr =  str.split(":").pop();
console.log(newStr)

We call split on str to split str into an array using the colon as the delimiter.

Then we call pop to return the last element of the array returned by split .

And so we get the same result as before.

Use a Regex

We can also use a regex to split a string by a given delimiter and get the part we want from the split string.

For instance, we can write:

const str = "Abc: Lorem ipsum sit amet";
const newStr = /:(.+)/.exec(str)[1];
console.log(newStr)

to call exec on the regex that matches the colon separator.

And we use index 1 to get the 2nd item from the split string.

And so we get the same result as before.

We can create an invisible link and click it with JavaScript to download a file.

To do this, we write:

const downloadURI = (uri, name) => {
  const link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
downloadURI('https://file-examples-com.github.io/uploads/2017/02/file-sample_100kB.doc', 'sample.doc')

We have the downloadURI function that takes the uri of the file to download and the name of the file that’s downloaded.

In the function body, we create an a element with the document.createElement method.

Then we set the download attribute with:

link.download = name;

to set the filename of the downloaded file to name .

Next, we set the href attribute with:

link.href = uri;

Then we call appendChild to append the link to the body element.

And then we click on the link by calling click .

And finally, we call removeChild to remove the link from the body.

Now when we run the downloadURI function, files should be downloaded if it can’t be opened by the browser directly.