CODEWITHSUNDEEP
javascript
Jim
Jim

Reputation: 14270

How to correctly access the name of a JavaScript variable passed to a function?

I have two JS variables that contain the IDs of an HTML input element and a span element respectively.

const male1DOB = document.getElementById('male1-dob');
const male1DOBError = document.getElementById('male1-dob-error');

I want to reference these two elements in a function. Of course, one way to do it would be to pass the two element objects to the function like this:

validateElemId(maleDOB, maleDOBError);
...
function validateElemId(elem, elemError) {
    // Print value of input element
    console.log(elem.value);
    // Print error string
    console.log(elemError.innerHTML);

But since these elements share a common prefix, it would be cleaner and terser to just pass that prefix to the function as a string and then interpolate it in the function something like this:

validateElemId(maleDOB);
...
function validateElemId(elem) {
    console.log(<elem>.value);
    console.log(<elem>Error.innerHTML);
}

How do you do this? If I do this:

validateElemId('maleDOB')
...
function validateElemId(elem) {
    console.log(`${elem}.value`);

I get the following instead of the actual value of the element:

maleDOB.value

If I do this instead:

validateElemId(maleDOB):
...
function validateElemId(elem) {
    console.log(elem.value);
    console.log(elemError.innerHTML);

I get the correct element value but I get an error for elemError:

Uncaught ReferenceError: elemError is not defined.

Upvotes: 0

Views: 67

Answers (4)

GM-atteoni
GM-atteoni

Reputation: 455

I think you can do something like this:

function validateElemId(text) {
  const male1DOB = document.getElementById(text);
  const male1DOBError = document.getElementById(`${text}-error`);

  console.log(male1DOB.value);
  console.log(male1DOBError.innerHTML);
}

By the way your question is not 100% clear, anyway I hope it helps you.

Upvotes: 3

Ahmed Hammad
Ahmed Hammad

Reputation: 3085

I would suggest you simply wrap them in an object named male1DOB

const male1DOB = {
  'value': document.getElementById('male1-dob'),
  'error': document.getElementById('male1-dob-error')
}

Now you just pass this to the function

validateElemId(male1DOB);
...
function validateElemId(elem) {
    console.log(elem.value);
    console.log(elem.error.innerHTML);
}

Upvotes: 1

GirkovArpa
GirkovArpa

Reputation: 4912

<input id="male1-dob" value="foo" />
<textarea id="male1-dob-error">bar</textarea>

<script>
  function validateElemId(elem) {
    elem = Object.keys(elem)[0];
    console.log(eval(`${elem}.value`));
    console.log(eval(`${elem}Error.innerHTML`));
  }

  const maleDOB = document.getElementById('male1-dob');
  const maleDOBError = document.getElementById('male1-dob-error');

  validateElemId({ maleDOB }); 
  // foo
  // bar
</script>

Upvotes: 0

Sven.hig
Sven.hig

Reputation: 4519

In this part of your code 

validateElemId('maleDOB')
...
function validateElemId(elem) {
    console.log(`${elem}.value`);

you are only passing the element 'maleDOB' but you are not retrieving it, and its the same case for elemError.innerHTML

if you want to deal with ids you can simply create a function like this 

function retrieveElem(id){
     return  document.getElementById(id)}

and then you can use anywhere in your code it like this

const elem=retrieveElem('maleDOB') 
validateElemId(elem)
...
function validateElemId(elem) {
    console.log(`${elem}.value`);

Upvotes: 0

Related Questions