CODEWITHSUNDEEP
javascriptjqueryparameter-passing
Ola
Ola

Reputation: 1208

Add string parameter to function in onClick function?

I have an onclick function with a parameter. This parameter I would like to show in a alert for example. How can I give a parameter? Something like this:

<img id="imgPerson" src="_#=itemImg=#_" width="200" height="200" onclick="SetDetailInfo('test value 123')"/>

function SetDetailInfo(myCustomParam) {
    alert(myCustomParam);
}

UPDATE The code above is working fine. But ofcorse I dont want to give the function a fixed parameter. I would like to make it dynamic. This code below works. You see some variabe with the name "#= line2 =#" is printed in a div. This works and shows some string runtime. And I would like to add that value of that variable to the function as a parameter.

<img id="imgBestuurderFoto" src="_#=itemDate=#_" width="200" height="200" onclick="SetDetailInfo('test 123')" style="padding:0 !important;margin:0 !important;border:0 !important;" />

       <div class="cbs-Line2" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_" style="display:block;" >_#= line2 =#_</div>

This is the javascript with the variables:

var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_2lines_");
var line2 = $getItemValue(ctx, "IntroText");
line2.overrideValueRenderer($contentLineText);
var line2Id = encodedId + "line2";

Upvotes: 0

Views: 848

Answers (2)

Maxi Baez
Maxi Baez

Reputation: 578

I'm particularly a big fan of using data-attributes to the dom in elements to distribute information, try this :

<img id="imgPerson" src="_#=itemImg=#_" 
     width="200" height="200" data-test-attr="test value 123"/>

In js

$("#imgPerson").click(function(e){
     alert($(this).data("test-attr"));
});

Upvotes: 1

Mister Epic
Mister Epic

Reputation: 16723

That will work fine, but you should bind your event handler unobtrusively outside your markup so you don't have to hardcode that string:

var someValue = "Test 123"; //This could be dynamic
var img = document.queryselector('#imgPerson');
img.addEventListener('click', function(e){
     SetDetailInfo(someValue);
});

function SetDetailInfo(myCustomParam) {
    alert(myCustomParam);
}

Upvotes: 1

Related Questions