Category: JavaScript

Sometimes, we may run into the JavaScript .replaceAll() is not a function error in some browsers.

In this article, we’ll look at how to fix the JavaScript .replaceAll() is not a function error in some browsers.

Fix the JavaScript .replaceAll() is not a function Error

To fix the JavaScript .replaceAll() is not a function error in some browsers, we can add a polyfill to make the method available in all browsers.

For instance, we write:

if (typeof String.prototype.replaceAll == "undefined") {  
  String.prototype.replaceAll = function(match, replace) {  
    return this.replace(new RegExp(match, 'g'), () => replace);  
  }  
}

to add the code for the JavaScript string replaceAll method.

It adds an instance method that calls replace with a global regex to match all the substrings that matches the given regex.

Then the callback in the 2nd argument of replace is called to replace all substring matches with replace .

Most newer browsers should have this method built into the browser, so this is only needed for supporting older browsers.

Conclusion

To fix the JavaScript .replaceAll() is not a function error in some browsers, we can add a polyfill to make the method available in all browsers.

Sometimes, we may run into the JavaScript ‘document.querySelector(…) is null’ error when we try to select an element that’s loading in our JavaScript app.

In this article, we’ll look at how to fix the JavaScript ‘document.querySelector(…) is null’ error when we try to select an element that’s loading in our JavaScript app.

Fix the JavaScript ‘document.querySelector(…) is null’ Error

To fix the JavaScript ‘document.querySelector(…) is null’ error when we try to select an element that’s loading in our JavaScript app, we should make sure the element is present when we’re trying to select it.

To make sure this is the case, we can use document.querySelector in the DOMContentLoaded event listener.

For instance, if we have:

<input id="tags">

then we can write:

document.addEventListener("DOMContentLoaded", () => {  
  document.querySelector('input')  
    .addEventListener('change', (event) => {  
      //...  
    })  
});

to select the input in the DOMContentLoaded event handler.

We add the event handler with the document.addEventListener method to listen to the event emitted by the html element.

Then we make sure that the input element is already loaded by putting the document.querySelector call inside the DOMContentLoaded event handler.

Conclusion

To fix the JavaScript ‘document.querySelector(…) is null’ error when we try to select an element that’s loading in our JavaScript app, we should make sure the element is present when we’re trying to select it.

To make sure this is the case, we can use document.querySelector in the DOMContentLoaded event listener.

Sometimes, we may run into the ‘this.source is not a function’ when we’re trying to add an autocomplete input with jQuery UI Autocomplete.

In this article, we’ll look at how to fix the ‘this.source is not a function’ when we’re trying to add an autocomplete input with jQuery UI Autocomplete.

Fix the jQuery UI Autocomplete ‘this.source is not a function’ Error

To fix the ‘this.source is not a function’ when we’re trying to add an autocomplete input with jQuery UI Autocomplete, we should pass in an object with the source property set to an array as the argument of the autocomplete method.

For instance, we write:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input id="tags">

to add the CSS link tag and script tags for the jQuery and jQuery UI libraries.

Then we add an input with the input tag.

Next, we turn the input into an autocomplete input with:

const fakedata = ['test1', 'test2', 'test3', 'test4', 'ietsanders'];
$("#tags").autocomplete({
  source: fakedata
});

We call autocomplete with the source property set to fakeData to add the autocomplete entries and show them when we type in something that matches one or more of the fakedata entries.

Conclusion

To fix the ‘this.source is not a function’ when we’re trying to add an autocomplete input with jQuery UI Autocomplete, we should pass in an object with the source property set to an array as the argument of the autocomplete method.

Sometimes, we may run into the ESLint ‘error no-undef for document’ error when we’re developing our JavaScript app.

In this article, we’ll look at how to fix the ESLint ‘error no-undef for document’ error when we’re developing our JavaScript app.

Fix the ESLint ‘error no-undef for document’ Error

To fix the ESLint ‘error no-undef for document’ error when we’re developing our JavaScript app, we can add:

"browser": true

into the env section of the ESLint config file.

To do this, we write:

{  
  "env": {  
    "browser": true,  
    "node": true  
  }  
}

And we add "document": false into the globals section with:

{  
  "globals": {  
    "document": false  
  }  
}

This way, ESLint will assume that the app runs in the browser environment and so the document object will be available.

And so ESLint won’t emit the error.

We can also do the same thing from the CLI.

To set browser to true , we run:

eslint --env browser,node file.js

And to include document in globals , we run:

eslint --global document file.js

Conclusion

To fix the ESLint ‘error no-undef for document’ error when we’re developing our JavaScript app, we can add:

"browser": true

into the env section of the ESLint config file.

Sometimes, we want to splice a JavaScript array in half regardless of the size.

In this article, we’ll look at how to splice a JavaScript array in half regardless of the size.

Splice a JavaScript Array in Half Regardless of the Size

To splice a JavaScript array in half regardless of the size, we can use the slice method with the index of the middle element.

For instance, we can write:

const arr = [1, 2, 3, 4, 5, 6]
const halfwayThrough = Math.floor(arr.length / 2)
const arrayFirstHalf = arr.slice(0, halfwayThrough);
const arraySecondHalf = arr.slice(halfwayThrough, arr.length);

console.log(arrayFirstHalf, arraySecondHalf)

We have the arr array that we want to split in 2.

To do this, we get the index of the middle element with:

const halfwayThrough = Math.floor(arr.length / 2)

We take the floor of the length divided by 2 with Math.floor .

Then we get the first half with:

const arrayFirstHalf = arr.slice(0, halfwayThrough);

that returns the first 3 elements of arr with slice .

slice takes the first index of the element and 1 after the index of the last element we want to include with the returned array respectively.

Then we get the 2nd half with:

const arraySecondHalf = arr.slice(halfwayThrough, arr.length);

Therefore, arrayFirstHalf is:

[1, 2, 3]

And arraySecondHalf is:

[4, 5, 6]

Conclusion

To splice a JavaScript array in half regardless of the size, we can use the slice method with the index of the middle element.