Can function arguments be passed into a string?

Question

I'm making a calculator table with javascript, and I'm writing document.getElementById('x').innerHTML all the time. Can I write a function to replace this code? For example:

function select (a) {
  return document.getElementById(${a}).innerHTML;
}

The trouble I see is if I used template literals within getElementById, I can't add the quotes necessary to define the string as a string.

To put it back into context, I have many cells in a table each with different Ids. In order to allow js to update each cell, I've had to repeatedly write: document.getElementById('x').innerHTML. This had me wonder, can I just write a little function that would let me skip this extra typing? Can a function take an argument and return it with quotes around it?

"I have many cells in a table each with different Ids." That's usually avoidable. — ziggy wiggy
– ziggy wiggy, Commented Jun 15, 2019 at 13:18
The reason they're there is to allow for different calculations in each cell, using variables. — willbeing
– willbeing, Commented Jun 16, 2019 at 17:19

PaulProgrammer · Accepted Answer · 2019-06-15 04:29:11Z

3

Just

var select = function(a) {
  return document.getElementById(a).innerHTML;
}
var ham = select('thing');

is good enough. The system already knows there's a string there, because that's the type it is when you call the select() function.

If you're trying to make for less typing while assigning a value to the innerHTML, you have to do that within the function body as well. Why? Because once you return the innerHTML string property from the function it's an immutable value, similar to saying 'a' = 'b'.

Here's what that assignment function might look like:

var assign = function( target, value) {
    document.getElementById(target).innerHTML = value;
}
assign('capitalGain', '$' + currency(initialGain));

edited Jun 15, 2019 at 4:29

answered Jun 15, 2019 at 3:42

PaulProgrammer

18k4 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

willbeing Over a year ago

Thanks for the quick response Paul. I tried: var select = function (a) { return document.getElementById(a).innerHTML; } and then later tried to use it with: select('capitalGain') = "$" + currency(initialGain); only to get the error ReferenceError: invalid assignment left-hand side

PaulProgrammer Over a year ago

Oh! You're trying to do an assignment, not a fetch. That's a very different thing. Try function(assignto, value) { document.getElementById(assignto).innerHTML = value }

willbeing Over a year ago

Hmm, that doesn't work either. What's on the right hand side of the above assignment is irrelevant to this issue. I'm wondering if it's possible to create a function that takes an argument and passes it as a string, with the requirements that getElementById require, which is that the string is contained within quotes. In other words, a function that takes the argument a and returns document.getElementById('a').innerHTML

PaulProgrammer Over a year ago

You're trying to treat the innerHTML property as a pointer (as if it were C). That's not how it works.

willbeing Over a year ago

I see, so the closest you can get is by writing function select (a) { return document.getElementById(a); } and then using it later as select('idNameHere').innerHTML = ...

|

Jack Bashford · Accepted Answer · 2019-06-15 03:56:28Z

1

You don't need template literals for a task this simple:

function select(a) {
    return document.getElementById(a).innerHTML;
}

Or if you must:

function select(a) {
    return document.getElementById(`${a}`).innerHTML;
}

And now Chrome supports a jQuery-like syntax - so in new versions of Chrome, this will also work.

function select(a) {
    return $(`#${a}`)[0].innerHTML;
}

Or the more verbose and understandable version:

function select(a) {
    let str = "#" + a;
    let [elem] = $(str);
    return elem.innerHTML;
}

And one more - in contrast to the verbose one, this one is quite unreadable and bad practice.

const select = a => ([{ innerHTML: b }] = $(`#${a}`), b);

answered Jun 15, 2019 at 3:56

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

2 Comments

willbeing Over a year ago

Thanks Jack, but your first answer, the simplest, is the first thing I tried. It doesn't work, because getElementById requires quotes within the parenthesis to define the id

PaulProgrammer Over a year ago

@willBeing the getElementById function requires a string parameter. When you write javascript, values in quotes are considered strings. But so are variables that have a string value.

Collectives™ on Stack Overflow

Can function arguments be passed into a string?

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related