Author: John Au-Yeung

To get cursor position (in characters) within a text Input field with JavaScript, we use the selectionStart method.

For instance, we write

<input type="text" id="t1" value="abcd" />
<button onclick="onClick(document.getElementById('t1'))">check position</button>

to add an input and a button.

Then button calls the onClick function when we click on the element with the input as its argument.

Next we write

function onClick(el) {
  const val = el.value;
  console.log(val.slice(0, el.selectionStart).length);
}

to define the onClick function.

In it, we get the input’s value with el.value.

And then we get the cursor position with el.selectionStart.

We call slice to get the part of the val string between index 0 and el.selectionStart - 1.

To pass a string parameter in an onclick function with JavaScript, we add a click listener that calls the function that takes the string.

For instance, we write

const inputElement = document.createElement("input");
inputElement.type = "button";
inputElement.addEventListener("click", () => {
  gotoNode(result.name);
});

document.body.appendChild(inputElement);

to create an input with createElement.

We set the type property to set the type attribute.

Then we call addEventListener to add a click listener to the input that calls the gotoNode function with the string.

Then we call appendChild to append the input as the last child of the body element.

To scroll to an element using JavaScript, we call the scrollIntoView method.

For instance, we write

document.getElementById("divFirst").scrollIntoView();

to select the element with getElementById.

Then we call scrollIntoView to scroll it into view.

To add onload event to a div element with JavaScript, we use the MutationObserver constructor.

For instance, we write

const observer = new MutationObserver((mutationList, obsrvr) => {
  const divToCheck = document.querySelector("#foo");
  if (divToCheck) {
    console.log("div is loaded now");
    obsrvr.disconnect();
    return;
  }
});

const parentElement = document.querySelector("parent-static-div");
observer.observe(parentElement, {
  childList: true,
  subtree: true,
});

to create the observer object by calling MutationObserver with a callback that checks if the element with ID foo with querySelector.

Then we check if it’s not null with the if statetment.

If it’s not null, then we call disconnect to disconnect the observer.

Next, we select its parent element with querySelector.

And then we call observer.observe with the parentElement and an object that has childList and subtree set to true to watch for changes of the elements down the hierarchy.