CODEWITHSUNDEEP
javascriptjqueryhtml
hrmck
hrmck

Reputation: 93

Elements chosen have same value but different id

How can I choose to run the same function with different parameters according to the id?

In the JQuery, the input buttons with value="+" is chosen, then I want to determine what is their id, and then call the javascript function with different parameters.

For example, button with id="Add_1" is chosen, then the function called is getData(0);

Here is the html (extract)

<html>
<head>
<link href="../css/coin_convert.css" rel="stylesheet" type="text/css">
<script src="coin_convert.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="form">
<form name="coins">
<input type="button" value="+" id="Add_1" />
<input type="button" value="+" id="Add_2"/>
<input type="button" value="+" id="Add_3"/>
<input type="button" value="+" id="Add_4"/>
</form>
</div>


</body>
</html>

Here is the JQuery

$(document).ready(function() { 
    $("[value='+']").on("click", function() {
      if($("[value='+']").is("Add_1")){
        getData(0);
        }
    });
});

Here is the JavaScript function to be called

function getData(n){
    var coin = new Array(4);
    switch (n){
        case 0:
            coin[n]=document.getElementById('coin_dragon').value;
            break;
        case 1:
            coin[n]=document.getElementById('coin_sky').value;
            break;
        case 2:
            coin[n]=document.getElementById('coin_special').value;
            break;
        case 3:
            coin[n]=document.getElementById('coin_legend').value;
            break;          
    }
    addition(coin[n]);

}

Many thanks!

Upvotes: 0

Views: 85

Answers (4)

Obsidian Age
Obsidian Age

Reputation: 42354

You need to use .attr('id') to find the ID attribute.

In order to have this run for each element that has the associated ID, you would need to run a loop that uses an index, and gets the data based off of that index:

$(document).ready(function() {
  $("[value='+']").each(function(index) {
    $(this).click(function() {
      if ($(this).attr('id') == 'Add_' + (index + 1)) {
        getData(index);
      }
    });
  });
});

In this example, whenever an element with both a value of + and an ID that starts with Add_ is clicked, getData() will trigger, passing through one less than the the number in the element's ID. Clicking an element with an ID that doesn't start with Add_ will not trigger getData().

I've created a working fiddle showcasing this here.

Hope this helps!

Upvotes: 1

Gwellin
Gwellin

Reputation: 484

jQuery's .is() function expects the passed parameter to be a selector. As such, your is() condition should check for "#Add_1", not "Add_1"

if($("[value='+']").is("#Add_1")){

You could alternately get them all by using the Attribute Starts With Selector

$('[id^="Add_"]'))

And later check the number with the Attribute Ends With Selector

$('[id$="_1"]'))

Upvotes: 0

Daniel
Daniel

Reputation: 1364

May I suggest some new ideas based on the code that you've provided:

getData just appears to call 'addition(value)' depending on the button that was clicked. I've refactored the code down contain a data attribute on each button and then just pass that along.

See this fiddle example: https://jsfiddle.net/88z1e4yu/ 

$(document).ready(function() { 
    $("#form-coin > input").on("click", function() {
      getData($(this).data('coin'));
    });
});

function getData(coin){
  alert(coin);
  addition(document.getElementById(coin).value);
}

Upvotes: 0

Jack Pilowsky
Jack Pilowsky

Reputation: 2303

You use .attr('id') to get the id of an element

if($("[value='+']").attr('id')== 'Add_1'){
    getData(0);
}

Upvotes: 0

Related Questions