Changing the call javascript function variable with jquery?

advertisements

There is a html page like this:

<div id="list"><a onclick = "javascript:addplaylist('shv231a','1');" href="javascript:void(0);">+</a></div>
<div id="list"><a onclick = "javascript:addplaylist('jhr2a13','1');" href="javascript:void(0);">+</a></div>
<div id="list"><a onclick = "javascript:addplaylist('thy2b1k','1');" href="javascript:void(0);">+</a></div>

There are javascript functions

 addplaylist('shv231a','1');
    addplaylist('jhr2a13','1');
    addplaylist('thy2b1k','1');

I want to change value '1' with '2' in javascript function (addplaylist) when user click this

<a id="make2" onclick="" href="javascript:void(0);">Change the value 2</a>

How can I do that with jquery?


The way to do this with jQuery is to move all of the Javascript code into a separate file or script block within the HTML. Any way which abstracts the display (HTML + CSS) from the behavior (Javascript)

This will require a bit of reworking of the HTML. In particular removing the duplicate id fields in favor of having id's be unique. Additionally removing the javascript references from the onclick handler.

<div id="list1"><a>+</a></div>
<div id="list2"><a>+</a></div>
<div id="list3"><a>+</a></div>

Then with jQuery you can specify the behavior of these links directly from the JavaScript. This is true for both the play list links and the one which modifies them to pass '2',

$(document).ready(function () { 

  var secondArg = '1';

  $('#list1 a').click(function (e) {
    addplaylist('shv231a1', secondArg);
    e.preventDefault();  // Don't follow link
  });

  $('#list2 a').click(function (e) {
    addplaylist('jhr2a13', secondArg);
    e.preventDefault();  // Don't follow link
  });

  $('#list3 a').click(function (e) {
    addplaylist('thy2b1k', secondArg);
    e.preventDefault();  // Don't follow link
  });

  $('#make2').click(function (e) {
    secondArg = '2';
    e.preventDefault();
  });

});