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

I'm looking for a methode 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.

CodePudding user response：

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

const documentById = (id) => parseInt(document.getElementById(id).value);

let length = documentById("length");
let start = documentById("start");
let end = documentById("end");

console.log("length:", length);
console.log("start:", start);
console.log("end:", end);

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

CodePudding user response：

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')