Author: John Au-Yeung

To get the text node after an HTML element with JavaScript, we can use the nextsubling.nodeValue property to get the text content of the text node after a given element.

For instance, if we have the following HTML:

<input type="checkbox" name='something' value='v1' /> All the world <br />

Then we can get the node value of the element after it by writing:

const text = document.querySelector('input[name="something"]').nextSibling.nodeValue
console.log(text)

We select the input with:

document.querySelector('input[name="something"]')

Then we use the nextSibling.nodeValue property of it to get the text node value next to it, which is 'All the world' .

To prevent the pressing of the space bar from scrolling the page with JavaScript, we can listen to the keydown event with window.addEventListener .

Then in the event handler, we can detect pressing the space bar on the body element.

For instance, we can write:

window.addEventListener('keydown', (e) => {  
  if (e.keyCode === 32 && e.target === document.body) {  
    e.preventDefault();  
  }  
});

We call window.addEventListener with 'keydown' and an event listener that detects presses of the space bar on the body element.

Key code 32 is the space bar and e.keyCode has the numeric code of the key that’s pressed.

e.target has the element that the keydown event is emitted from. And we compare that against the body element with document.body .

e.preventDefault prevents the default behavior when the space bar is pressed, which is to scroll the page.

To remove the parent HTML element using JavaScript, we can use parentElement.remove method.

For instance, if we have the following HTML:

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

Then we can remove the p element’s parent, which is the div by writing:

document.querySelector('p').parentElement.remove();

We just select the p element with:

document.querySelector('p')

Then we call parentElement.remove() on it.

To get an option’s text or value with JavaScript, we can use properties built into the browser to get the options’ text or value.

For instance, we can write:

<form name="foodSelect">
  <select name="mainCourse">
    <option>- select -</option>
    <option value="breakfast">Breakfast</option>
    <option value="lunch">Lunch</option>
    <option value="dinner">Dinner</option>
  </select>
</form>

to create the form with the select dropdown.

Then we get the select by writing:

const select = document.querySelector('select')

select.addEventListener('change', () => {
  const {
    text,
    value
  } = select.options[select.selectedIndex]
  console.log(text, value)
})

We get the select element with document.querySelector .

Then we get the option element that’s selected with:

select.options[select.selectedIndex]

select.selectedIndex has the index of the element that’s selected.

The text property has the text of the option element that’s displayed to the user.

value has the value of the value attribute of the selected option.

To calculate age from date of birth using jQuery, we can use native JavaScript date methods.

For instance, we can write the following HTML:

<div>

</div>

Then we write:

const dt = new Date();
dt.setFullYear(dt.getFullYear() - 18);

$('div').text((dt.getTime() - new Date(1990, 5, 6).getTime() < 0) ? "Under 18" : "Over 18");

to create the dt date object with that we set to 18 years before today.

Then we call text with dt.getTime() — new Date(1990, 5, 6).getTime() < 0) ? “Under 18” : “Over 18” to check if the date is after the day that’s 18 years before today with:

dt.getTime() — new Date(1990, 5, 6).getTime() < 0

If it is, then we set the div’s text to 'Under 18' .

Otherwise, we set it to 'Over 18' .