Category: JavaScript

Sometimes, we want to enable or disable input elements with JavaScript.

In this article, we’ll look at how to enable or disable input elements with JavaScript.

How to enable or disable input elements with JavaScript?

To enable or disable input elements with JavaScript, we can loop through the inputs to disable the ones we want.

For instance, we write:

<button>
  toggle
</button>
<input>
<input>
<input>

to add a button with inputs.

Then we write:

const toggleInputs = () => {
  const inputs = document.getElementsByTagName('input');
  for (const input of inputs) {
    input.disabled = !input.disabled;
  }
}

document.querySelector('button').onclick = toggleInputs;

We define the toggleInputs function to select the inputs with getElementsByTagName.

Then we loop through the inputs with a for-of loop.

In the loop body, we toggle the disabled property of each input to toggle disabling them.

Therefore, when we click toggle, we see all the inputs being toggled between enabled and disabled.

Conclusion

To enable or disable input elements with JavaScript, we can loop through the inputs to disable the ones we want.

Sometimes, we want to use the JavaScript array splice method with the third parameter as an array.

In this article, we’ll look at how to use the JavaScript array splice method with the third parameter as an array.

How to use the JavaScript array splice method with the third parameter as an array?

To use the JavaScript array splice method with the third parameter as an array, we can use the spread operator with splice.

For instance, we write:

const a1 = ['a', 'e', 'f'];
const a2 = ['b', 'c', 'd'];

a1.splice(1, 0, ...a2);
console.log(a1)

to call a1.splice with 1, 0 and the entries of the a2 array as arguments.

This inserts 'b', 'c' and 'd' between 'a' and 'e' in `a“.

Therefore, a1 is ['a', 'b', 'c', 'd', 'e', 'f'].

Conclusion

To use the JavaScript array splice method with the third parameter as an array, we can use the spread operator with splice.

To convert an array of objects to object with key value pairs with JavaScript, we can use the Object.fromEntries method.

For instance, we write:

const array = [{
  name1: "value1"
}, {
  name2: "value2"
}]

const map = array.map(a => {
    return Object.entries(a)
  })
  .flat()
const obj = Object.fromEntries(map)
console.log(obj)

We call array.map with a callback to return the key-value pair of each object in array as a nested array.

Then we call flat to flatten the array.

Next, we call Object.fromEntries with the map key-value pair nested array to combine the key-value pairs into an object.

Therefore, obj is {name1: 'value1', name2: 'value2'}.

Sometimes, we want to get the text inside an li element when it’s clicked with JavaScript.

In this article, we’ll look at how to get the text inside an li element when it’s clicked with JavaScript.

How to get the text inside an li element when it’s clicked with JavaScript?

To get the text inside an li element when it’s clicked with JavaScript, we can listen to the click event on the document.

Then if an li is clicked, we get the text.

For instance, we write:

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

to add some li elements.

Then we write:

document.onclick = (e) => {
  if (e.target.tagName.toLowerCase() === 'li') {
    console.log(e.target.innerText)
  }
}

to set the document.onclick property to a function that gets the clicked element with the e.target property.

Then we check the tagName of the element that’s clicked to see if it’s 'li'.

If it is, then we get the text of the li element with e.target.innerText.

Conclusion

To get the text inside an li element when it’s clicked with JavaScript, we can listen to the click event on the document.

Then if an li is clicked, we get the text.

Sometimes, we want to show div when radio button selected with JavaScript.

In this article, we’ll look at how to show div when radio button selected with JavaScript.

How to show div when radio button selected with JavaScript?

To show div when radio button selected with JavaScript, we can listen to the change event of the radio buttons.

For instance, we write:

<input type='radio' name='foo'>
<input type='radio' name='foo'>
<input type='radio' name='foo'>
<div style='display: none'>
  hello
</div>

to add radio buttons and a div that shows when we click on any radio button.

Then we write:

const input = document.querySelectorAll('input')
const div = document.querySelector('div')
for (const i of input) {
  i.onchange = () => {
    div.style.display = 'block'
  }
}

to select all the radio inputs and the div with querySelectorAll and querySelector.

Next, we loop through each input and set the onchange property to a function that’s called when the radio button checked value is changed.

In the function, we set the display CSS property to block to show the div.

Conclusion

To show div when radio button selected with JavaScript, we can listen to the change event of the radio buttons.