Category: JavaScript Answers

To set a button’s value using JavaScript, we can set the innerHTML property of the button.

For instance, if we have the following HTML:

<form>
  <button name="submit-button">Original<br>Text</button>
</form>

We can write:

const form = document.querySelector('form')
form.elements["submit-button"].innerHTML = 'submit'

to get the form with document.querySelector .

Then we get the button with the name attribute set to submit-button with:

form.elements["submit-button"]

And we set the innerHTML property of it to 'submit' .

Therefore, the button in the form would have ‘submit’ as its text content.

To count the number of occurrences for each char in a JavaScript string, we can create an object that keeps track of how many characters are in each string.

Then we can loop through each character of the string with a for-of loop.

For instance, we can write:

const countChar = (str) => {
  const counts = {};
  for (const s of str) {
    if (counts[s]) {
      counts[s]++
    } else {
      counts[s] = 1
    }
  }
  return counts;
}

const str = "I want to count the number of occurences of each char in this string";
console.log(countChar(str))

to count the number of occurrences in each character in str with the countChar function.

Then function loops through each character of string str with the for-of loop.

Next, we create the counts object to keep track of the count of each character.

Then if count[s] exists, we increment it by 1.

Otherwise, we set count[s] to 1.

And then when the loop is done, we return the counts object.

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.