Question

0

83

Views

Variable method not to repeat myself for: document.getElementById?

I'm looking for a method where I can make a variable containing the document.getElementById and include the correct value for the ID as a variable value. What I have now is this:

    let lenght = parseInt(document.getElementById("lenght").value);
    let start = parseInt(document.getElementById("start").value);
    let end = parseInt(document.getElementById("end").value);

But what I would like to have is something like this:

    let documentById = parseInt(document.getElementById($elementName).value)
    let lenght = documentById("lenght");
    let start = documentById("start");
    let end = documentById("end");

Am I thinking in the correct way or is this a method that does not make sense? Any tips/suggestions are welcome as I try to learn.

5 months ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-11T14:11:51.346Z

You could accomplish this with a simple function that takes in the ID of the element as a parameter and returns the value as intended

function documentById(id) {
  const el = document.getElementById(id);
  if (!el) return undefined; // element doesn't exist 
  const value = parseInt(el.value, 10); // parsing string to a number (default radix is 10)
  return isNaN(value) ? { number: false, value: value } : { number: true, value: value }; 
}

const { number, value } = documentById('end'); // if value isnt a number return false (to prevent errors);
if (number) console.log(value); // if value is a number log its value
else console.log('not a valid number')

Answer 2 · 2022-07-11T14:11:51.353Z

Sure, you can make a function that returns just that.

const getValueById = (id) => parseInt(document.getElementById(id).value, 10);

const length = getValueById("length");
const start = getValueById("start");
const end = getValueById("end");

console.log({ length, start, end });

<input id="length" value="5" />
<input id="start" value="2" />
<input id="end" value="6" />