How to pass dynamic value into Javascript Function?

Question

Ok, this code works fine

<html>
<body>
<p>This is question.</p>
<img src="http://cliparts.co/cliparts/qTB/5yd/qTB5ydpzc.gif" alt="show answer" height="42" 

width="42" id="showHideImg" onclick="myFunction()">
<p id="showHide">This answer.</p>
<script type="text/javascript">

function myFunction() {
    if (document.getElementById("showHide").style.display=="none")
    {
      document.getElementById("showHide").style.display="block";
    }
    else
    {
      document.getElementById("showHide").style.display="none";
    }
}

</script>  

</body>
</html>

However, in the real app, I got many images & <p> like the followings:

<p>This is question1.</p>
<img src="http://cliparts.co/cliparts/qTB/5yd/qTB5ydpzc.gif" alt="show answer" height="42" 

width="42" id="showHideImg" onclick="myFunction()">
<p id="showHide1">This answer1.</p>

<p>This is question2.</p>
<img src="http://cliparts.co/cliparts/qTB/5yd/qTB5ydpzc.gif" alt="show answer" height="42" 

width="42" id="showHideImg" onclick="myFunction()">
<p id="showHide2">This answer2.</p>

.......question 3... 4....5...

My question is that how to modify the myFunction() so that it can dynamically apply for many images

I tried like the following:

<p>This is question1.</p>
<img src="http://cliparts.co/cliparts/qTB/5yd/qTB5ydpzc.gif" alt="show answer" height="42" 

width="42" id="showHideImg" onclick="myFunction(1)">
<p id="showHide1">This answer1.</p>
<script type="text/javascript">

function myFunction(var no) {
    if (document.getElementById("showHide"+no).style.display=="none")
    {
      document.getElementById("showHide"+no).style.display="block";
    }
    else
    {
      document.getElementById("showHide"+no).style.display="none";
    }
}

But it doesn't work

Check your console. You have a syntax error. Don't declare parameters with var. You should only have no, not var no. — Mike Cluck
– Mike Cluck, Commented Jan 20, 2016 at 17:44

crmpicco · Accepted Answer · 2016-01-20 17:46:55Z

1

You don't need var when declaring your method arguments.

Try the following:

function myFunction(no) {
    if (document.getElementById("showHide"+no).style.display=="none")
    {
      document.getElementById("showHide"+no).style.display="block";
    }
    else
    {
      document.getElementById("showHide"+no).style.display="none";
    }
}

answered Jan 20, 2016 at 17:46

crmpicco

17.3k31 gold badges142 silver badges222 bronze badges

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

Comments

Dave Newton · Accepted Answer · 2016-01-22 16:27:22Z

1

Just pass it in, leave off the var, and you're done.

I'd refactor out a bunch of stuff though, and make names meaningful, e.g.,

function toggleEl(num) {
    var el = document.getElementById("showHide" + num)
      , currStyle = el.style.display
      , nextStyle = curr === "none" ? "block" : "none"
      ;

    el.style.display = nextStyle;
}

(Note that toggle() may be sufficient for your ultimate needs.)

edited Jan 22, 2016 at 16:27

answered Jan 20, 2016 at 17:50

Dave Newton

161k27 gold badges263 silver badges310 bronze badges

Collectives™ on Stack Overflow

How to pass dynamic value into Javascript Function?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related