Category: JavaScript

To include both href and onclick in an HTML a tag with JavaScript, we add both attributes.

For instance, we add a link with

<a href="www.example.com" onclick="return onClick();">Item</a>

We define the onClick function with

function onClick() {
  // ...
}

We set onclick to return the return value of onClick so that if onClick returns false, the link won’t navigate to the href URL.

onClick is called when the link is clicked.

To host Material icons offline with JavaScript, we can install the material-icons-font package.

We install it by running

npm install material-icons-font --save

Then we add some @import statements into our SCSS code by writing

@import "~material-icons-font/sass/variables";
@import "~material-icons-font/sass/mixins";
$MaterialIcons_FontPath: "~material-icons-font/fonts";
@import "~material-icons-font/sass/main";
@import "~material-icons-font/sass/Regular";

to include the icon files.

Then we use it by writing

<i class="material-icons">face</i>
<i class="material-icons md-48">face</i>
<i class="material-icons md-light md-inactive">face</i>

To stop a web page from scrolling to the top when a link is clicked that triggers JavaScript, we call the preventDefault method.

For instance, we write

document.getElementById("#ma_link").addEventListener("click", (e) => {
  e.preventDefault();
  doSomething();
});

to select the link with getElementById.

Then we call addEventListener to add a click listener to it.

And we call e.preventDefault in the click listener to stop the scrolling.

To access form elements by HTML ID or name attribute with JavaScript, we use the elements property.

For instance, we write

<form id="myForm">
  <input type="text" name="foo" />
</form>

to add a form.

Then we write

const fooInput = document.getElementById("myForm").elements["foo"];

to get the input inside the form.

We select the form with getElementById.

And then we get the input with the elements["foo"] property.

'foo' is the name attribute value of the input.

To determine if an HTML element’s content overflows with JavaScript, we check if the parent width is smaller than the element’s width.

For instance, we write

const checkOverflow = (elem) => {
  const elemWidth = elem.getBoundingClientRect().width;
  const parentWidth = elem.parentElement.getBoundingClientRect().width;

  return elemWidth > parentWidth;
};

to get the elem element’s width with elem.getBoundingClientRect().width;.

We get its parent’s width with elem.parentElement.getBoundingClientRect().width;.

And then if elem‘s width is bigger than parentWidth, then elem overflows its parent.