Author: John Au-Yeung

Sometimes, we want to replace text inside a div element with JavaScript.

In this article, we’ll look at how to replace text inside a div element with JavaScript.

How to replace text inside a div element with JavaScript?

To replace text inside a div element with JavaScript, we set the textContent property of the div element.

For instance, we write

const div = document.querySelector("div");
div.textContent = "New text";

to select a div with querySelector.

Then we set its textContent property to 'New text' to render ‘New text’ as the new content of the div.

Conclusion

To replace text inside a div element with JavaScript, we set the textContent property of the div element.

Sometimes, we want to modify Jasmine spies based on arguments with JavaScript.

In this article, we’ll look at how to modify Jasmine spies based on arguments with JavaScript.

How to modify Jasmine spies based on arguments with JavaScript?

To modify Jasmine spies based on arguments with JavaScript, we can use the withArgs method.

For instance, we write

describe("user test", () => {
  it("gets user name and ID", () => {
    spyOn(externalApi, "get")
      .withArgs("abc")
      .and.returnValue("Jane")
      .withArgs("123")
      .and.returnValue(98765);
  });
});

to call withArgs with the arguments that we want to call externalApi.get with.

And then we call returnValue to mock the returned value given the argument we called withArgs with.

And we call withArgs and returnValue a 2nd time to call externalApi.get with the 2nd argument and mock its returned value given the argument.

Conclusion

To modify Jasmine spies based on arguments with JavaScript, we can use the withArgs method.

Sometimes, we want to display date/time in user’s locale format and time offset with JavaScript.

In this article, we’ll look at how to display date/time in user’s locale format and time offset with JavaScript.

How to display date/time in user’s locale format and time offset?

To display date/time in user’s locale format and time offset, we can use the DateTimeFormat object’s format method.

For instance, we write

const utcDate = new Date(Date.UTC(2022, 11, 20, 3, 23, 16, 738));
console.log(new Intl.DateTimeFormat().format(utcDate));

to create a UTC timestamp with Date.UTC.

And then we convert the timestamp to a DFate object with the Date constructor.

Next, we call format with utcDate to return a date string formatted to the user’s current locale.

Conclusion

To display date/time in user’s locale format and time offset, we can use the DateTimeFormat object’s format method.

Sometimes, we want to detect if browser tab has focus with JavaScript.

In this article, we’ll look at how to detect if browser tab has focus with JavaScript.

How to detect if browser tab has focus with JavaScript?

To detect if browser tab has focus with JavaScript, we set window.onfocus and the window.onblur properties to event listener functions for the focus and blur events.

For instance, we write

let focused = true;

window.onfocus = () => {
  focused = true;
};
window.onblur = () => {
  focused = false;
};

to set window.onfocus and window.onblur to the focus and blur event listener functions.

When the window gets focus, then onfocus is run.

And when we switch to another window, onblur is run.

Conclusion

To detect if browser tab has focus with JavaScript, we set window.onfocus and the window.onblur properties to event listener functions for the focus and blur events.