Pass a variable directly into getElementById using the parameter (JavaScript)

Question

I'm working on my first JavaScript game and I want to display certain attributes inside of < p> tags. The ID of each < p> tag will be equal to "show-" and the name of the attribute (see example below for the attribute "name").

But I'm having trouble getting the syntax right for getElementById. Any suggestions?

<p id="show-name"></p>

<script>
    name = "Bob";
    function display(attribute) {
        putItHere = "'show-"+attribute+"'"
        document.getElementById(putItHere).innerHTML = attribute;
    }
    display(name);
</script>

the id should be show-Bob no?

Maurice Perry
– Maurice Perry

2015-05-07 13:29:33 +00:00
Commented May 7, 2015 at 13:29 — Maurice Perry
– Maurice Perry, Commented May 7, 2015 at 13:29
Change to display("name").

mjzr
– mjzr

2015-05-07 13:29:36 +00:00
Commented May 7, 2015 at 13:29 — mjzr
– mjzr, Commented May 7, 2015 at 13:29

Tim Rijavec · Accepted Answer · 2015-05-07 13:36:01Z

2

You need to target the right element. Currently you are targeting 'show-Bob' and not 'show-name' what your trying to do. So first generate the id, from the key name and then assign a value to that element.

var name = "Bob";
function display(key, value) {
    var putItHere = "show-"+ key;
    document.getElementById(putItHere).innerHTML = value;
}
display('name', name);

note keep in mind that IDs should be unique within the document

However, other way to do that is to target all elements with a specific tag, for instance

<div data-id="name"></div>
<div data-id="name"></div>
<div data-id="name"></div>

<script type="text/javascript">
    var name = "Bob";
    function display(key, value) {
        var putItHere = "show-"+ key;
        var elements = document.querySelectorAll('div[data-id="'+key+'"]');
        for(var eid in elements) {
            var element = elements[eid];
            element.innerHTML = value;
        }
    }
    display('name', name);
</script>

note that that this doesn't work in IE7 and below.

edited May 7, 2015 at 13:36

answered May 7, 2015 at 13:30

Tim Rijavec

1,80023 silver badges27 bronze badges

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

1 Comment

Tim Rijavec Over a year ago

And keep in mind that IDs should be unique within the document.

Thomas Junk · Accepted Answer · 2015-05-07 13:38:30Z

0

Your attribute is Bob. So putItHere = "'show-"+attribute+"'" is equivalent to: putItHere = "'show-"+"Bob"+"'", which makes no sense.

You should get the following error Uncaught TypeError: Cannot set property 'innerHTML' of null.

This should do:

function display(attrname, val){
    document.querySelector('#show-'+attrname).innerText=val;
}

display("name","Bob");

Here is the Fiddle to play with.

edited May 7, 2015 at 13:38

answered May 7, 2015 at 13:33

Thomas Junk

5,6962 gold badges34 silver badges48 bronze badges

Collectives™ on Stack Overflow

Pass a variable directly into getElementById using the parameter (JavaScript)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related