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
– dexhering, Commented Feb 4, 2016 at 1:29

Community · Accepted Answer · 2017-05-23 11:59:15Z

2

<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.

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Feb 3, 2016 at 23:58

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

robrich · Accepted Answer · 2016-02-04 00:00:14Z

0

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();
});

answered Feb 4, 2016 at 0:00

robrich

13.3k7 gold badges39 silver badges63 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related