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!

Answer 1

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"
    }
}

Answer 2

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
}