Author: John Au-Yeung

Sometimes, we want to add onclick event programmatically with JavaScript.

In this article, we’ll look at how to add onclick event programmatically with JavaScript.

How to add onclick event programmatically with JavaScript?

To add onclick event programmatically with JavaScript, we can set the onclick property of an element.

For instance, we write:

<button>
  click me
</button>

to add a button.

Then we write:

const button = document.querySelector('button')
button.onclick = () => {
  console.log('clicked')
}

to select the button with querySelector.

Then we set the button.onclick property to a function that logs 'clicked'.

As a result, we see 'clicked' logged when the button is clicked.

Conclusion

To add onclick event programmatically with JavaScript, we can set the onclick property of an element.

Sometimes, we to find the nth occurrence of a character in a string in JavaScript.

In this article, we’ll look at how to find the nth occurrence of a character in a string in JavaScript.

How to find the nth occurrence of a character in a string in JavaScript?

To find the nth occurrence of a character in a string in JavaScript, we can use the string indexOf method with the from index argument.

For instance, we write:

const indexOfNth = (string, char, nth, fromIndex = 0) => {
  const indexChar = string.indexOf(char, fromIndex);
  if (indexChar === -1) {
    return -1;
  } else if (nth === 1) {
    return indexChar;
  } else {
    return indexOfNth(string, char, nth - 1, indexChar + 1);
  }
}

const str = 'foobarfoobaz'
console.log(indexOfNth(str, 'o', 3))

We define the indexOfNth function that recursively calls string.indexOf with fromIndex as the 2nd argument to start searching from fromIndex.

If indexOf returns -1, we return -1 since char isn’t in string.

If indexOf returns 1, then we found the index of the nth occurrence so we return indexChar.

Otherwise, we keep searching by calling indexOfNth with nth - 1 and indexChar + 1.

Therefore, 7 is logged from the console log since the 3rd o is at index 7.

Conclusion

To find the nth occurrence of a character in a string in JavaScript, we can use the string indexOf method with the from index argument.

Sometimes, we want to sum of input values in sections with JavaScript.

In this article, we’ll look at how to sum of input values in sections with JavaScript.

How to sum of input values in sections with JavaScript?

To sum of input values in sections with JavaScript, we can convert the node list of inputs to an array.

Then we can use the array map and reduce methods to add the values together.

For instance, we write:

<form>
  <input type="number" value="2" />
  <input type="number" value="0" />
  <input type="number" value="1" />
  <input type="number" value="3" />
  <input type='submit'>
</form>

to add a form.

Then we select the form and input elements with querySelector and querySelectorAll.

Then we set the form.onsubmit property to the form submit handler.

In it, we call e.preventDefault to stop the default submission behavior.

Then we spread the inputs into an array.

Next, we call map with a callback to get the input value and convert them to numbers.

Finally, we call reduce with a callback to add all the numbers together.

Therefore, sum is 6 according to the console log.

Conclusion

To sum of input values in sections with JavaScript, we can convert the node list of inputs to an array.

Then we can use the array map and reduce methods to add the values together.

Sometimes, we want to duplicate a div onclick event with JavaScript.

In this article, we’ll look at how to duplicate a div onclick event with JavaScript.

How to duplicate a div onclick event with JavaScript?

To duplicate a div onclick event with JavaScript, we can call cloneNode` to clone an element.

Then we can set the onclick property of the cloned element to the same event handler function as the original element.

For instance, we write:

<div id="duplicater">
  foo
</div>

to add a div.

Then we clone it by writing:

let i = 1
const original = document.getElementById('duplicater');
const onClick = () => console.log('clicked')
original.onclick = onClick

const clone = original.cloneNode(true);
i++
clone.id = `duplicater${i}`;
clone.onclick = onClick;
original.parentNode.appendChild(clone);

We select the original element and add a click listener to it with:

const original = document.getElementById('duplicater');
const onClick = () => console.log('clicked')
original.onclick = onClick

Then we deep clone the element by calling cloneNode with true.

Next, we set the ID of the cloned element by setting the id property.

And then we add the click handler by setting clone.onclick to onClick.

Finally, we append it it to the original element’s parent node with original.parentNode.appendChild(clone);.

Conclusion

To duplicate a div onclick event with JavaScript, we can call cloneNode` to clone an element.

Then we can set the onclick property of the cloned element to the same event handler function as the original element.