Category: JavaScript Answers

To check if the inputted value is a number or letter with JavaScript, we can get the inputted value of the input element with the value property.

Then we can use the isNaN function to check if the inputted value is a number or not.

For instance, if we have the following form:

<form name="myForm">
  Age: <input type="text" name="age">
  <input type="submit" value="Submit">
</form>

Then we can get the form and check that the age field has a number entered in it by writing:

const {
  myForm
} = document.forms

myForm.addEventListener('submit', (e) => {
  e.preventDefault()
  const x = myForm.age.value;
  if (isNaN(x)) {
    alert("Must input numbers");
  }
})

We get the form by its name attribute value from document.forms .

Then we call addEventListener with 'submit' to add a submit event listener to the form.

The 2nd argument is the submit event handler callback that calls e.preventDefault to prevent default server-side submission.

Then it gets the value of from the myForm.age field, which is the input with name attribute set to age .

Next, we check if the x string is not a number with isNaN .

If it returns true , then we know it’s not a number string, and we display an alert to the user with alert.

Otherwise, it’s a number.

Conclusion

To check if the inputted value is a number or letter with JavaScript, we can get the inputted value of the input element with the value property.

Then we can use the isNaN function to check if the inputted value is a number or not.

To get the width of an element in pixels that has the style CSS property set ith % with JavaScript, we can use the clientWidth property of the element.

For instance, if we have the following HTML:

<div style="width: 100%; height: 10px;"></div>

with the width set to 100% and we want to get the width in pixels.

Then we can get the width of the div in pixels by writing:

const {  
  clientWidth  
} = document.querySelector('div')  
console.log(clientWidth)

We select the div with document.querySelector .

And then we destructure the clientWidth property from the selected element object.

clientWidth is the width of the div in pixels.

Conclusion

To get the width of an element in pixels that has the style CSS property set ith % with JavaScript, we can use the clientWidth property of the element.

To get the background image URL of an element using JavaScript, we can use the getComputedStyle method to get the value of the background-image CSS property.

For instance, if we have the following HTML:

<div style="background-image:url('http://www.example.com/img.png');">...</div>

Then we can get the value of the background-image CSS property in the style tag by writing:

const div = document.querySelector('div')  
const style = window.getComputedStyle(div, false)  
const bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");  
console.log(bi)

We get the div with document.querySelector .

Then we call window.getComputedStyle with div to get the CSS style values of the div in an object.

To get the background-image CSS property value, we use the style.backgroundImage property.

And then we call slice to extra the URL part of the image and replace to replace the quotation marks from the string.

Therefore, bi is:

'https://www.example.com/img.png'

To turn all the keys of a JavaScript object to lower case, we can use the Object.entries method to convert the object to an array with the key-value pair arrays.

Then we can use the JavaScript array map method to map the keys to lower case.

And finally, we use the Object.fromEntries method to convert the mapped key-value pair array back to an object.

For instance, we can write:

const obj = {
  FOO: 1,
  BAR: 2,
  BAZ: 3
}
const newObj = Object.fromEntries(
  Object.entries(obj).map(([k, v]) => [k.toLowerCase(), v])
);
console.log(newObj)

We have the obj object with property key names that are all in upper case.

To convert all the key names to lower case, we call Object.entries with obj to map all the object properties to key-value pair arrays in an array.

Then we call map with a callback that returns the k key converted to lower case with toLowerCase .

The property value v stays unchanged.

And then we call Object.fromEntries to convert the key-value pair array back to an object and assigned the returned object to newObj.

Therefore newObj is:

{
  "foo": 1,
  "bar": 2,
  "baz": 3
}

according to the console log.

Sometimes, we want to check if an element is a div with JavaScript.

In this article, we’ll look at how to check if an element is a div with JavaScript.

Check if an Element is a Div with JavaScript

To check if an element is a div with JavaScript, we can get the tagName property of an element.

For instance, if we have the following HTML:

<div>
  foo
</div>
<p>
  bar
</p>

Then we can write:

for (const el of document.querySelectorAll('*')) {
  if (el.tagName.toLowerCase() === "div") {
    //it's a div
    console.log(el)
  } else {
    //it's not a div
  }
}

to select all the elements in the HTML with document.querySelectorAll and loop through the selected elements with the for-of loop.

Then in the loop body, we get the tag name of each element with the tagName property.

We call toLowerCase to convert the tag name to lower case.

Then we can check if el is a div by comparing it against 'div' .

If it’s a div, then we log it.

And we should see the div in the console log.

Conclusion

To check if an element is a div with JavaScript, we can get the tagName property of an element.