Pass function argument into getElementById "id"

Question

It's a js function that shows various text input forms when you select an apropriate value from a select box.

function arata_formular(formular) {
            document.getElementById("formular").style.visibility = "visible";
            if(document.getElementById("formular").style.display == "none" ) {
                document.getElementById("formular").style.display = "inline";
            }
            else {
                document.getElementById("formular").style.display = "visible";
            }
        }

But doesn't work as expected. Although it has an argument regardless of what i'll pass into there (lets say arata_formular(entropy) it will still look for the "formular" id not "entropy" one. How can I make the 'inline' insert?

Unfortunately I can't use jquery on this or other frameworks. I must use only javascript. Thanks!

Ascherer · Accepted Answer · 2013-01-15T23:49:20.090

5

Just get rid of the quotes.

function arata_formular(formular) {
    var el = document.getElementById( formular );

    el.style.visibility = "visible";
    el.style.display = el.style.display === "none" ? "inline" : "visible";
}

OR

function arata_formular(formular) {
    document.getElementById( formular ).style = {
        visibility: "visible",
        display: el.style.display === "none" ? "inline" : "visible"
    }
}

edited Jan 15 '13 at 23:49

answered Jan 15 '13 at 23:43

Ascherer

8,223
3
42
60

I'd like to add that the reason for this is that you don't put quotes around a variable (unless you'd be doing Eval, but that's not really good form) – Destrictor Jan 15 '13 at 23:46
And insert quotes into the argument. Brilliant! Thanks. It works. – erasmus77 Jan 15 '13 at 23:47
no problem, edited it more to cache the variable too, so you dont have to keep searching the dom for it – Ascherer Jan 15 '13 at 23:49

score 3 · Answer 2 · answered Jan 15 '13 at 23:46

formular is a variable but you are using it like a string. Also, you should cache it:

function arata_formular(formular) {
        var el = document.getElementById(formular);
        el.style.visibility = "visible";
        if(el.style.display == "none" ) {
            el.style.display = "inline";
        }
        else {
            el.style.display = "visible";
        }
        return el;//in case you want to use the element
}

Pass function argument into getElementById "id"

2 Answers2

OR