How to prevent a browser from storing passwords with HTML and JavaScript?

To prevent a browser from storing passwords with HTML and JavaScript, we set the autocomplete attribute to off and change the readonly attribute dynamically.

For instance, we write

<input
  type="text"
  name="username"
  autocomplete="off"
  readonly
  onfocus="this.removeAttribute('readonly');"
/>

to set the autocomplete attribute to off.

And we set the onfocus attribute to JavaScript code that calls removeAttribute on the element to remove the readonly attribute when we focus on it.

How to open a link in a new tab with JavaScript in a Chrome extension?

To open a link in a new tab with JavaScript in a Chrome extension, we call the chrome.tabs.create method.

For instance, we write

{
  //...
  "background": {
    "scripts": ["background.js"]
  }
  //...
}

in manifest.json to add the background.js script as a background script.

Then we write

chrome.browserAction.onClicked.addListener((activeTab) => {
  const url = "http://example.com/";
  chrome.tabs.create({ url });
});

in background.js to add a click listener for our Chrome extension with onClicked.addListener.

In the listener, we call chrome.tabs.create with { url } to open a new tab that goes to the url.

How to avoid decimal values in a number input with JavaScript?

To avoid decimal values in a number input with JavaScript, we use parseInt to convert the value to an integer.

For instance, we write

<input
  type="number"
  oninput="this.value = (parseInt(this.value) || 0)"
  placeholder="0-9"
  autofocus=""
  value="0"
/>

to add a number input with the oninput attribute set to this.value = (parseInt(this.value) || 0).

The code is run as we type.

And it calls parseInt to parse the input value into an integer.

We then assign that as the new input value.

How to replace CSS files on the fly with JavaScript?

To replace CSS files on the fly with JavaScript, we can create a new link element.

For instance, we write

function changeCSS(cssFile, cssLinkIndex) {
  const oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
  const newlink = document.createElement("link");
  newlink.setAttribute("rel", "stylesheet");
  newlink.setAttribute("type", "text/css");
  newlink.setAttribute("href", cssFile);

  document
    .getElementsByTagName("head")
    .item(cssLinkIndex)
    .replaceChild(newlink, oldlink);
}

to add the changeCSS function.

In it, we get the link element and get the link element to replace with the item meethod and the cssLinkIndex index.

Then we create a new link element with createElement.

We add the attributes for the new element with setAttribute.

And then we get the head element with getElementsByTagName and item.

We then call replaceChild to replace the oldLink element with the newLink link element.

How to add an SVG element to an existing SVG using DOM with JavaScript?

To add an SVG element to an existing SVG using DOM with JavaScript, we use the createElementNS method.

For instance, we write

const [svg] = document.getElementsByTagName("svg");
const newElement = document.createElementNS(
  "http://www.w3.org/2000/svg",
  "path"
);
newElement.setAttribute("d", "M 0 0 L 10 10");
newElement.style.stroke = "#000";
newElement.style.strokeWidth = "5px";
svg.appendChild(newElement);

to get the svg element with getElementsByTagName.

And then we call createElementNS to create a path element in the "http://www.w3.org/2000/svg" namespace.

Next, we add the d attribute to the path element with setAttribute.

And then we set the stroke and strokeWidth styles on the path element.

Finally, we call svg.appendChild to append newElement to the svg element.

How to detect when CSS property changed using JavaScript?

To detect when CSS property changed using JavaScript, we listen for the DOMAttrModified event.

For instance, we write

document.documentElement.addEventListener(
  "DOMAttrModified",
  (e) => {
    if (e.attrName === "style") {
      console.log(e.prevValue, e.newValue);
    }
  },
  false
);

document.documentElement.style.display = "block";

to listen for the DOMAttrModified event on the body element with document.documentElement.addEventListener.

Then we check if the style attribute is changed with e.attrName in the event listener.

We get the previous value of it with e.prevValue and the latest value with e.newValue.

Then when we change the style property, the event will be triggered.

How to fix blurry text in an HTML5 canvas with JavaScript?

To fix blurry text in an HTML5 canvas with JavaScript, we set the canvas width and height to the parent’s width and height.

For instance, we write

const canvas = document.getElementById("canvas");
canvas.width = canvas.getBoundingClientRect().width;
canvas.height = canvas.getBoundingClientRect().height;

to get the canvas with getElementById.

Then we call getBoundingClientRect to get an object with the parent’s width and height.

And we set the width and height as the values of the canvas’ width and height to fix blurry text in the canvas.

How to get the first and last elements with JavaScript querySelector?

To get the first and last elements with JavaScript querySelector, we use the first-child and last-child selectors.

For instance, we write

const first = div.querySelector("[move_id]:first-child");
const last = div.querySelector("[move_id]:last-child");

to call querySelector with a select with first-child at the end to select the first element with attribyute move_id.

And we call querySelector with a select with last-child at the end to select the first element with attribyute move_id.