passing values to a function does not work when inside for loop

Question

I'm mapping currencies from a json file and i render the mapped currencies to a component. I have a .php file like this

<div class="currency-switch-container" id="currency_container">
    <span style="font-size:12px;font-weight:bold">All currencies</span>
    <div id="currency-map" style="margin-top:15px"></div>
</div>

I refer the div in the above component in my js file as follows

let currencyMap = jQuery("#currency-map");

And when my jQuery document is ready i'm doing the following

jQuery(document).ready(function($) {
  $.getJSON('wp-content/themes/mundana/currency/currency.json', function(data) {
    for(let c in data){
      currencyMap.append(`<span onclick="onCurrencyClick(${data[c].abbreviation})"
      class="currency-item">
        <span>
           ${data[c].symbol}
        </span>
        <span>
          ${data[c].currency}
        </span>
      </span>`)
    }
});

}

and my function is like this

function onCurrencyClick(val){
  console.log("val",val);
  setCookie("booking_currency", val, 14);
}

Here the function does not work. But if i do not pass anything to the function it seems to work as i can see the log in the terminal.

What's the value of `data[c].abbreviation`? I'm guessing it's a string and you need to wrap it in quotes — Rory McCrossan, Apr 14 '20 at 08:27

score 1 · Accepted Answer · answered Apr 14 '20 at 08:31

Hi your expression ${data[c].abbreviation} will put the value into function string without string quotes i.e. the resultant would be onCurrencyClick(abbreviation) while it should be onCurrencyClick('abbreviation'). please use onclick="onCurrencyClick('${data[c].abbreviation}')" instead.

score 1 · Answer 2 · answered Apr 14 '20 at 09:59

Instead of using the inline onclick, use event delegation. This means that you have a single event listener that handles all the events from the children and grandchildren. The modification is a very minor one seeing the example here below.

A reason for doing this is that you keep your JavaScript inside your JS file. Like now, you encounter a JS error and have to look for it in your HTML. That can get very confusing. Also however inline onclick listeners are valid, they are outdated and should be avoided unless there is absolutely no other way. Compare it with using !important in CSS, same goes for that.

function onCurrencyClick(event){
  var val = $(this).val();
  setCookie("booking_currency", val, 14);
}

currencyMap.on('click', '.currency-item', onCurrencyClick);

This example takes the val that you try to insert from the value attribute from the clicked .current-item. <span> elements don't have such an attribute, but a <button> does and is a much more suitable element for it expects to be interacted with. It is generally a good practice to use clickable elements for purposes such as clicking.

In the example below you see the button being used and the abbreviation value being output in the value attribute of the <button> element and can be read from the onCurrencyClick function.

jQuery(document).ready(function($) {
  $.getJSON('wp-content/themes/mundana/currency/currency.json', function(data) {
    for(let c in data){
      currencyMap.append(`
        <button value="${data[c].abbreviation}" class="currency-item">
          <span>
            ${data[c].symbol}
          </span>
          <span>
            ${data[c].currency}
          </span>
        </button>
      `)
    }
});

score 0 · Answer 3 · answered Apr 14 '20 at 08:33

0

onclick will not work for a dynamically added div tag

Yo should follow jQuery on event

Refer: jQuery on
Stackoverflow Refer: Dynamic HTML Elements

answered Apr 14 '20 at 08:33

Dickens A S

3,824
2
22
45

passing values to a function does not work when inside for loop

3 Answers3