How to pass variables when adding 'onclick' with JS

Question

I'm having a problem with a simple tabbed page. It all works OK if I hard code the 'onclicks' in the tabs that appear at the top of the page like this:

    <ul class="tabs" data-persist="true">
        <li class='tablinks' onclick="openTab('view1')" id='default'>How to find Maolbhuidhe</li>
        <li class='tablinks' onclick="openTab('view2')">How to get to Mull</li>
        <li class='tablinks' onclick="openTab('view3')">Map of Mull</li>
        <li class='tablinks' onclick="openTab('view4')">Map of Scotland</li>
    </ul>

There's a JS file containing the function 'openTab', of course.

But when I try to add the onclick events via JS/jQuery after the page has loaded, I'm running into a problem. The HTML for this section now looks like this:

    <ul id='toptabs' class="tabs" data-persist="true">
        <li class='tablinks' id='default'>How to find Maolbhuidhe</li>
        <li class='tablinks'>How to get to Mull</li>
        <li class='tablinks'>Map of Mull</li>
        <li class='tablinks'>Map of Scotland</li>
    </ul>

The JS script I'm using to add the onclick events is:

    function applyClicks() {
        var toptabs = document.getElementById("toptabs");
        var lnks = toptabs.getElementsByTagName("li");
        for (var i=0; i<lnks.length; i++) {
            var k = (i+1)
            var vw = 'view' + k;
            alert ('vw is: ' + vw);
            lnks[i].onclick = (function() {
                openTab('view' + k);
            });
        }
    }

The problem seems to lie in providing the parameter to 'openTab()'. I've tried several variations, the one shown ends up as "openTab('view' + k)" (As seen in Inspector DOM). If I hard code it as 'view1' it works, but of course all the links are then the same, so only the first tab can be shown. It seems whatever I put in the JS function as the parameter gets treated as a literal.

What do I need to do to make the parameter 'view1', 'view2', 'view3', 'view4' (as in the hard coded version) according to the value of i ? This was the purpose of the var 'vw', which duly shows all the right values in turn as the script runs, but just shows up in the link on the page as 'vw'

I've also tried the widely recommended 'addEventListener('click', ...) etc. but I get the same problem (or something similar). It may be better to add an event listener eventually, but first I need to resolve the problem of passing the variable to the 'Click'.

Hi Tim - just following up. Was your question answered satisfactorily? If there is more I can help with, please add a comment below my answer, or edit your question to clarify what else you want to know. Otherwise, it would be great if you could choose a "best answer" (by clicking the checkmark beside the answer) to close out the question. If no answer provided helpful information, please add your own answer and select that as the best answer. (You won't get any points for doing so, but that will close out the question.) Thanks! — cssyphus
– cssyphus, Commented Jun 11, 2019 at 23:28

cssyphus · Accepted Answer · 2019-06-07 14:59:50Z

2

Try it like this:

$('.tablinks').click(function(){
    let idx = $(this).index() + 1;
    //alert('view' + idx);
    openTab('view' + idx);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<ul id='toptabs' class="tabs" data-persist="true">
    <li class='tablinks' id='default'>How to find Maolbhuidhe</li>
    <li class='tablinks'>How to get to Mull</li>
    <li class='tablinks'>Map of Mull</li>
    <li class='tablinks'>Map of Scotland</li>
</ul>

This is why many of us prefer writing jQuery - it's just simpler. And shorter.

answered Jun 7, 2019 at 14:59

cssyphus

40.4k20 gold badges104 silver badges125 bronze badges

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

1 Comment

Tim Dawson Over a year ago

Works a treat. Thanks. Yes, jQuery is often simpler. I just grew up on plain JS so I turn to it first!

freefaller · Accepted Answer · 2019-06-07 15:08:24Z

1

An alternative way of doing it is using data attributes...

$('.tablinks').on("click", function() {
  var openValue = $(this).data("open");
  //openTab(openValue);
  console.log(openValue);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<ul id='toptabs' class="tabs" data-persist="true">
    <li class='tablinks' data-open="view1" id='default'>How to find Maolbhuidhe</li>
    <li class='tablinks' data-open="view2">How to get to Mull</li>
    <li class='tablinks' data-open="view3">Map of Mull</li>
    <li class='tablinks' data-open="view4">Map of Scotland</li>
</ul>

answered Jun 7, 2019 at 15:08

freefaller

20k7 gold badges62 silver badges96 bronze badges

Collectives™ on Stack Overflow

How to pass variables when adding 'onclick' with JS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related