Home/ Questions/Q 6641083
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T23:46:07+00:00

I’m wanting to click a button and have the matching id name show. I

  • 0

I’m wanting to click a button and have the matching id name show. I don’t know how to use contains, has, or filter to make this work. Basically, click a button find it’s id name. Then, if it’s id name matches one in nameList show only that id.

Second question. There has to be a better way to call all the buttonNames than the way I’m doing with variable bn.

</head>
<body>
    <div = "list">
        <ul class = "nameList">
            <li id ="Heather">Heather</li>
            <li id ="Cruz">Cruz</li>
            <li id ="Donny">Donny</li>
            <li id ="Jimmy">Jimmy</li>
        </ul>
    </div>
    <div = "buttonList">
        <form class = "buttonNames">
            <input type = "button" id = "Heather" value ="Heather"/>
            <input type = "button" id = "Cruz" value ="Cruz"/>
            <input type = "button" id = "Donny" value ="Donny"/>
            <input type = "button" id = "Jimmy" value ="Jimmy"/>
        </form>
    </div>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    // JavaScript Document
    google.load("jquery", "1.6.2");
    google.setOnLoadCallback(function(){
        $('.nameList').hide();

/*      $(nameList).each(function(i) { 
            var i = $(this).text();
            console.log("i = " + i);
        });*/

        //var buttons = $('#Heather, #Cruz, #Donny, #Jimmy');
        var bn = $('.buttonNames').children();
        console.log(bn);

        $(bn).click(function() {
            console.log("You have clicked Button = " + $(this).attr('id'));
            var t = $(this).attr('id');
        });

    });

    </script>    
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You cannot have duplicate IDs in your HTML. And, you already have the button value that gives you the name you want to refer to the appropriate LI tag. So, I’d suggest that you just get rid of the Id values on the buttons and use this.value to give you the name you need.

    So, to clean up the HTML to make it legal (no dup IDs), I’d use this HTML:

    <div id="list">
    <ul id = "nameList">
        <li id="Heather">Heather</li>
        <li id="Cruz">Cruz</li>
        <li id="Donny">Donny</li>
        <li id="Jimmy">Jimmy</li>
    </ul>
</div>
<div id="buttonList">
    <form class="buttonNames">
        <input type="button" value="Heather"/><br>
        <input type="button" value="Cruz"/><br>
        <input type="button" value="Donny"/><br>
        <input type="button" value="Jimmy"/><br>
    </form>
</div>

    With this javascript to show only the LI tag with the name that matches the button clicked:

    $("#buttonList input").click(function() {
    $("#nameList li").hide();
    $("#" + this.value).show();
});

    And, you can see it work in this jsFiddle: http://jsfiddle.net/jfriend00/Vhgrg/

    • 0