How do I pass a string variable through this java script function and then into getElementById()?

Question

My objective is to create a function that can be called at different points on a page to make certain <p> elements disappear and reappear. The viewer will be able to click on key words in the paragraph to make elements below it appear.

I have done something similar in another code block, but it requires me to make a new function every time I use it. And I may potentially have 15-20 times I need to call it on one page.

Below is the code I have written. The "state" is what I am using to make sure the processor is getting into my loops. I've had some experience with Java but I'm not super knowledgeable so I need small things like this.

This works perfectly, but only for one time. Because I have to set the variable "hidden" as the specific id of the object I want, it makes it a single use kind of thing. That would mean I need multiple functions. I would like to just pass the name of the id into the function as a parameter so that the function could be called for different objects.

<!doctype html>
<html>
<head>

    <style>

    a {color: red; }

    </style>

</head>  

<body>

<p id="currentState">Not set yet</p>

<p>Within this paragraph, <a onclick="myFunction()">THIS</a> is what you click.</p>

<p id="hidden1">This is supposed to be hidden</p>



<script>
    var state;

    function myFunction() {

        var hidden = document.getElementById("hidden1");

        if (hidden.style.display != "none"){
            hidden.style.display = "none";
            state = "State: Visible";
        }

        else if (hidden.style.display == "none"){
            hidden.style.display = "block";
            state = "State: Hidden";
        }

        document.getElementById("currentState").innerHTML = state;
    } 
</script>

</body>
</html>

And here is what I keep trying to do to fix my problem, but nothing seems to work. I'm not sure if its because the getElementById() doesn't recognize my variable as a string or if I'm not declaring the parameter correctly.

<!doctype html>
<html>
<head>

    <style>

    a {color: red; }

    </style>

</head>  

<body>

<p id="currentState">Not set yet</p>

<p>Within this paragraph, <a onclick="myFunction("hidden1")">THIS</a> is what you click.</p>

<p id="hidden1">This is supposed to be hidden</p>



<script>

    var state;

    function myFunction(name) {

        var hidden = document.getElementById(name);

        if (hidden.style.display != "none"){
            hidden.style.display = "none";
            state = "State: Visible";

        }

        else if (hidden.style.display == "none"){
            hidden.style.display = "block";
            state = "State: Hidden";

        }


        document.getElementById("currentState").innerHTML = state;



    }

</script>

</body>
</html>

I think something is off in this line: <a onclick="myFunction("hidden1")">THIS</a> That seems to be when my program says I have a syntax error. I'm not sure what that is. Any help is greatly appreciated!

could you put a sample of your "p" elements, and the elements to be hidden? — dexhering, Feb 04 '16 at 01:29

score 2 · Answer 1 · edited May 23 '17 at 11:59

<a onclick="myFunction("hidden1")">

The first " starts the value of the HTML attribute.

The second " ends the value of the HTML attribute.

If you want a " as data in an attribute delimited with " then you have to use an entity such as ".

Alternatively, switch to using '.

Better yet, bind your event handlers using JavaScript. That will separate your markup from your logic and save you from some of the weirdness that is intrinsic event attributes.

score 0 · Answer 2 · answered Feb 04 '16 at 00:00

Here's an answer using jQuery:

In your html:

... <a href="#" class="hiddenTrigger" data-target="hidden1">THIS</a> ...

... <p id="hidden1"> ...

In your JavaScript:

$('.hiddenTrigger').click(function () {
    var target = $(this).data('target');
    $('#'+target).show();
});

How do I pass a string variable through this java script function and then into getElementById()?

2 Answers2