Category: JavaScript Answers

Sometimes, we want to search for the immediate children of an element returned by querySelector with JavaScript.

In this article, we’ll look at how to search for the immediate children of an element returned by querySelector with JavaScript.

Search for the Immediate Children of an Element Returned by querySelector with JavaScript

To search for the immediate children of an element returned by document.querySelector , we can use the :scope pseudoselector.

For instance, if we have the following HTML:

<div>  
  <p>  
    hello world  
  </p>  
</div>

Then we can get the p element given the div by writing:

const getChild = (elem) => {  
  return elem.querySelectorAll(':scope > p');  
};  
const div = document.querySelector('div')  
console.log(getChild(div))

We define the getChild function that calls elem.querySelectorAll to get all the p elements that are the immediate child of the given elem .

Then we get the div with querySelector and assign it to div .

And then we call getChild with div to get the p element in the div in a Nodelist.

Conclusion

To search for the immediate children of an element returned by document.querySelector , we can use the :scope pseudoselector.

Sometimes, when we want to run nodemon, we may get the ‘nodemon command is not recognized in terminal for node js server’ error with JavaScript.

In this article, we’ll look at how to fix ‘nodemon command is not recognized in terminal for node js server’ error with JavaScript.

Fix the ‘nodemon command is not recognized in terminal for node js server’ Error with JavaScript

To fix the ‘nodemon command is not recognized in terminal for node js server’ error, we can install nodemon locally or install it locally and add a script into package.json to run the local version.

To install it locally, we can run:

npm install -g nodemon

with NPM or:

yarn global add nodemon

with Yarn.

And to add a local version, we run:

npm install nodemon

with NPM or:

yarn add nodemon

with Yarn.

Then we add:

"serve": "nodemon server.js"

into the 'scripts' second of package.json .

And then we run:

npm run serve

With Yarn, adding to the 'scripts' section is optional, and we can just run:

yarn run nodemon server.js

If we did add the script to package.json , we run:

yarn run serve

Conclusion

To fix the ‘nodemon command is not recognized in terminal for node js server’ error, we can install nodemon locally or install it locally and add a script into package.json to run the local version.

Sometimes, we want to add checkboxes inside select options with JavaScript.

In this article, we’ll look at how to add checkboxes inside select options with JavaScript.

Add Checkboxes Inside Select Options with JavaScript

To add checkboxes inside select options with JavaScript, we can wrap our select drop down in a div and then add a div below the select element to show the drop-down choices.

For instance, we can write the following HTML:

<form>
  <div class="multiselect">
    <div class="selectBox">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one">
        <input type="checkbox" id="one" />First checkbox</label>
      <label for="two">
        <input type="checkbox" id="two" />Second checkbox</label>
      <label for="three">
        <input type="checkbox" id="three" />Third checkbox</label>
    </div>
  </div>
</form>

We add the select element with the div with ID checkboxes with the choices.

The input with type checkbox are the checkboxes.

Then we can add the following CSS to make the choices look like they’re part of the drop-down:

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

To do that, we div with ID overSelect absolute.

And we make the div with ID selectBox have relative position.

Also, we make the div with ID checkboxes hidden by setting the display property to none .

Finally, we add the following JavaScript code to toggle the div with ID checkboxes on and off:

let expanded = false;

const showCheckboxes = () => {
  const checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}

const selectBox = document.querySelector('.selectBox')
selectBox.addEventListener('click', showCheckboxes)

We add the expanded variable to track the display state of the checkbox.

And we get the div with ID checkboxes with document.getElementById .

If expanded is false , then we set display to 'block' .

Otherwise, we set display to 'none' .

We also update expanded accordingly in each case.

Finally, we get the div with class selectBox with document.querySelector , call addEventListener with 'click' to add a click listener to it, and use showCheckboxes as the click listener.

Now when we click on the select element, we should see the drop-down with the checkboxes that we created.

Conclusion

To add checkboxes inside select options with JavaScript, we can wrap our select drop down in a div and then add a div below the select element to show the drop-down choices.

Sometimes, we want to use the setTimeout function in a JavaScript promise chain.

In this article, we’ll look at how to use the setTimeout function in a JavaScript promise chain.

Create a Function that Returns a Promise that uses setTimeout

We can create a function that returns a promise that calls setTimeout so that we can use setTimeout in a promise chain.

For instance, we can write:

const delay = (t, v) => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(v), t)
  });
}

(async () => {
  const one = await Promise.resolve(1)
  console.log(one)
  const two = await delay(1000, 2)
  console.log(two)
  const three = await Promise.resolve(3)
  console.log(three)
})()

to create the delay function that returns a promise by creating one with the Promise constructor.

We pass in a callback that calls setTimeout , which calls resolve with v and delays the execution of the callback by t milliseconds.

Then we use delay in an async function with other promises.

Now we should see a delay when we’re calling delay .

And 1, 2, and 3 are logged in the console log.

Conclusion

We can create a function that returns a promise that calls setTimeout so that we can use setTimeout in a promise chain.

Sometimes, we want to position a div in a specific coordinate with JavaScript.

In this article, we’ll look at how to position a div in a specific coordinate with JavaScript.

Position a Div in a Specific Coordinate with JavaScript

We can set the style.top and style.left properties to position a div in a specific coordinate with JavaScript.

For instance, we can write:

<div>  
  hello world  
</div>

Then we can set the position of the div by writing:

const d = document.querySelector('div');  
d.style.position = "absolute";  
d.style.left = '10px';  
d.style.top = '20px';

We get the div with document.querySelector .

Then we set its position CSS property to 'absolute' with:

d.style.position = "absolute";

Then we set the left and top CSS properties with:

d.style.left = '10px';  
d.style.top = '20px';

The unit must be specified for left and top.

Conclusion

We can set the style.top and style.left properties to position a div in a specific coordinate with JavaScript.