Category: JavaScript Answers

Sometimes, we want to get the parent element of a selected text with JavaScript.

In this article, we’ll look at how to get the parent element of a selected text with JavaScript.

How to get the parent element of a selected text with JavaScript?

To get the parent element of a selected text with JavaScript, we can use the getSelection method.

For instance, we write:

<button>
  get selection
</button>
<div>
  <section>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </section>
</div>

to add a button and some text.

Then we write:

const button = document.querySelector('button')
button.onclick = () => {
  console.log(window.getSelection().anchorNode.parentElement)
}

to select the button with querySelector.

And then we set the button.onclick property to a function that gets the selection with window.getSelection.

Then we use the anchorNode.parentElement property from the returned object to get the parent node of the selected text.

Conclusion

To get the parent element of a selected text with JavaScript, we can use the getSelection method.

Sometimes, we want to add click event handler to dynamically added button with JavaScript.

In this article, we’ll look at how to add click event handler to dynamically added button with JavaScript.

How to add click event handler to dynamically added button with JavaScript?

To add click event handler to dynamically added button with JavaScript, we can set the buttons’ onclick property to the event handler function.

For instance, we write:

const button = document.createElement('button')
button.textContent = 'click me'
button.onclick = () => {
  console.log('clicked')
}

document.body.appendChild(button)

to create the button with createElement.

Then we set its textContent to 'click me'.

Next, we set the onclick property to the click event handler.

Finally, we call document.body.appendChild with button to add the button as the child of the body element.

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

Conclusion

To add click event handler to dynamically added button with JavaScript, we can set the buttons’ onclick property to the event handler function.

Sometimes, we want to loop through arrays of arrays with JavaScript.

In this article, we’ll look at how to loop through arrays of arrays with JavaScript.

How to loop through arrays of arrays with JavaScript?

To loop through arrays of arrays with JavaScript, we can use the for-of loop.

For instance, we write:

const printArray = (arr) => {
  for (const a of arr) {
    if (Array.isArray(a)) {
      printArray(a);
    } else {
      console.log(a);
    }
  }
}

const parentArray = [
  [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ],
  [
    [10, 11, 12],
    [13, 14, 15],
    [16, 17, 18]
  ],
  [
    [19, 20, 21],
    [22, 23, 24],
    [26, 27, 28]
  ]
];
printArray(parentArray)

to define the printArray function that takes the arr array.

In it, we use the for-of loop to loop through each entry of arr.

And in the loop body, we check if a is an array with Array.isArray.

If it’s an array, we call printArray again.

Otherwise, we log the value with console.log.

Therefore, when we call printArray with parentArray, we see all the values logged.

Conclusion

To loop through arrays of arrays with JavaScript, we can use the for-of loop.

Sometimes, we want to get text between double quotes with JavaScript.

In this article, we’ll look at how to get text between double quotes with JavaScript.

How to get text between double quotes with JavaScript?

To get text between double quotes with JavaScript, we can use a regex.

For instance, we write:

const s = `"hello world"`
const [_, text] = s.match(/"((?:\\.|[^"\\])*)"/)
console.log(text)

to call s.match with /"((?:\\.|[^"\\])*)"/ to return an object with the text between the double quotes in the 2nd entry.

Therefore, text is 'hello world'.

Conclusion

To get text between double quotes with JavaScript, we can use a regex.

Sometimes, we want to increment value each time when you run function with JavaScript.

In this article, we’ll look at how to increment value each time when you run function with JavaScript.

How to increment value each time when you run function with JavaScript?

To increment value each time when you run function with JavaScript, we can create a variable outside the function and increment that when the function is run.

For instance, we write:

let count = 0
const f = () => {
  count++
}
f()
f()
console.log(count)

to define the count variable.

Then we define function f that increments count by 1.

Then we call f twice.

As a result, count is 2 according to the console log.

Conclusion

To increment value each time when you run function with JavaScript, we can create a variable outside the function and increment that when the function is run.