Author: John Au-Yeung

Sometimes, we want to use the JavaScript array filter but only take first result.

In this article, we’ll look at how to use the JavaScript array filter but only take first result.

How to use the JavaScript array filter but only take first result?

To use the JavaScript array filter but only take first result, we can use the JavaScript array destructuring syntax.

For instance, we write:

const [first] = [7, 5, 3, 2, 1].filter(x => x % 2 === 0)
console.log(first)

to call filter with a callback that checks if the element is even to return an array of even numbers.

Then we use the destructuring syntax to get the first element from the returned array and assign it to first.

Therefore, first is 2 according to the console log.

Conclusion

To use the JavaScript array filter but only take first result, we can use the JavaScript array destructuring syntax.

Sometimes, we want to check if object is a textbox with JavaScript.

In this article, we’ll look at how to check if object is a textbox with JavaScript.

How to check if object is a textbox with JavaScript?

To check if object is a textbox with JavaScript, we can check if the object is an instance of HTMLInputElement and that its type property is set to 'text'.

For instance, we write:

<input>

to add an input element.

Then we can select it and check if it’s a textbox by writing:

const obj = document.querySelector('input')
const isInputText = obj instanceof HTMLInputElement && obj.type === 'text';
console.log(isInputText)

We select the element with document.querySelector.

Then we use the instanceof operator to check that it’s an instance of HTMLInputElement.

And then we make sure that its type attribute is set to text with obj.type === 'text'.

Therefore the console log should log true.

Conclusion

To check if object is a textbox with JavaScript, we can check if the object is an instance of HTMLInputElement and that its type property is set to 'text'.

Sometimes, we want to scroll to an element without # in the URL with JavaScript.

In this article, we’ll look at how to scroll to an element without # in the URL with JavaScript.

How to scroll to an element without # in the URL with JavaScript?

To scroll to an element without # in the URL with JavaScript, we can use the scrollIntoView method.

For instance, we write:

<p id='top'>top</p>

<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>

<button>
  scroll to top
</button>

to add some elements onto the page.

Then we write:

const button = document.querySelector('button')

button.addEventListener('click', () => {
  document.getElementById('top').scrollIntoView(true);
})

We select the button with document.querySelector.

Then we call button.addEventListener to add a click listener to the button.

In the click listener, we select the element with id top with document.getElementById.

Then we call scrollIntoView with true to scroll to the element we selected.

Now when we click on the button, we should scroll back to the top of the page.

Conclusion

To scroll to an element without # in the URL with JavaScript, we can use the scrollIntoView method.

Sometimes, we want to make checkbox behave like radio buttons with JavaScript.

In this article, we’ll look at how to make checkbox behave like radio buttons with JavaScript.

How to make checkbox behave like radio buttons with JavaScript?

To make checkbox behave like radio buttons with JavaScript, we can listen to the body element’s click listener.

And in the listener, we uncheck all the checkboxes and the check off the one that matches the one that’s clicked.

For instance, we write:

<label>
  <input type="checkbox" name="cb1" class="chb" />
  CheckBox1
</label>
<label>
  <input type="checkbox" name="cb2" class="chb" />
  CheckBox2
</label>
<label>
  <input type="checkbox" name="cb3" class="chb" />
  CheckBox3
</label>
<label>
  <input type="checkbox" name="cb4" class="chb" />
  CheckBox4
</label>

to add the checkboxes.

Then we write:

const checkboxes = document.querySelectorAll('.chb')

document.body.addEventListener('click', (e) => {
  for (const c of checkboxes) {
    c.checked = false
  }

  const clickedCheckbox = [...checkboxes].find(c => c === e.target)
  clickedCheckbox.checked = true
})

We select the checkboxes with document.querySelectorAll.

Then we add a click listener to the body element with document.body.addEventListener.

In the click listener, we loop through the checkboxes with the for-of loop and set the checked property of all of them to false.

Then we find the checkbox that matches the one we clicked by spreading the checkboxes into an array and then use the find method and check which one matches the e.target.

e.target has the item that’s clicked.

Then finally, we set the checked property of the checkbox that matches to true.

Conclusion

To make checkbox behave like radio buttons with JavaScript, we can listen to the body element’s click listener.

And in the listener, we uncheck all the checkboxes and the check off the one that matches the one that’s clicked.

Sometimes, we want to remove values from select list based on condition with JavaScript.

In this article, we’ll look at how to remove values from select list based on condition with JavaScript.

How to remove values from select list based on condition with JavaScript?

To remove values from select list based on condition with JavaScript, we can watch the selected value of the drop down.

Then we can remove the values accordingly.

For instance, we write:

<select>
  <option value="A">Apple</option>
  <option value="C">Cars</option>
  <option value="H">Honda</option>
  <option value="F">Fiat</option>
  <option value="I">Indigo</option>
</select>

to add a select drop down.

Then we write:

const select = document.querySelector("select");

select.addEventListener('change', () => {
  if (select.value === 'F') {
    const aIndex = [...select.options].findIndex(o => o.value === 'A')
    select.options.remove(aIndex);
    const cIndex = [...select.options].findIndex(o => o.value === 'C')
    select.options.remove(cIndex);
  }
})

We get the select element with document.querySelector.

Then we add a change event listener with addEventListener.

In the event listener, we check if select.value if 'F'.

If it is, then we get the ones that we want to remove by spreading the options into an array.

Then we call findIndex with a function that checks the value of the option to look for the index of the ones we want to remove.

Then we call select.options.remove to remove them.

Now when we select Fiat, we see that the Apple and Cars options are removed.

Conclusion

To remove values from select list based on condition with JavaScript, we can watch the selected value of the drop down.

Then we can remove the values accordingly.