CODEWITHSUNDEEP
javascripthtml
Force Gaia
Force Gaia

Reputation: 528

javascript onClick=funct(this) replacement using addEventListener

I'm looking for a clear replacement for the old onClick=funct(this) html event handler when generating code dynamically. The problem is that I can't seem to find one no matter how I look.

I'm creating a <div> tag as part of a function, and inside it is a <a> tag with a html event handler for onClick, where it passes itself as a parameter so I can find the related elements inside its <div>. But I know this is bad practice now, and I'd like to instead use the preferred addEventListener way, but I've no idea how to pass the caller into the function unless because as far as I know the following won't work.

renamehead.addEventListener('click', 'rename(renamehead)');

My current code: the js, and the html it generates.

function makeActivity(name) {
  var act = document.createElement('div');
  act.setAttribute('class', 'activity');
  var acthead = document.createElement('div');
  acthead.setAttribute('class', 'acthead interface_element');
  act.appendChild(acthead);

  namehead = document.createElement('h3');
  var txt = document.createTextNode(name);
  namehead.appendChild(txt);
  namehead.setAttribute('contenteditable', 'true')
  acthead.appendChild(namehead);

  var renamehead = document.createElement('a');
  txt = document.createTextNode('Rename');
  renamehead.appendChild(txt);
  renamehead.setAttribute('class', 'headcommand');
  renamehead.setAttribute('href', 'javascript:void(0)');
  renamehead.setAttribute('onClick', 'rename(this)');

  var delhead = document.createElement('a');
  txt = document.createTextNode('Delete');
  delhead.appendChild(txt);
  delhead.setAttribute('class', 'headcommand');
  delhead.setAttribute('href', 'javascript:void(0)');
  delhead.setAttribute('onClick', 'delActivity(this)');

  txt = document.createTextNode(' ');
  acthead.appendChild(renamehead);
  acthead.appendChild(txt);
  acthead.appendChild(delhead);

  var actions = document.createElement('div');
  actions.setAttribute('class', 'actactions');
  actions.appendChild(makeDropDiv());
  act.appendChild(actions);
  return act;
}
<div id="activitydiv">
  <div class="activity">
    <div class="acthead interface_element">
      <h3>Record</h3>
      <a href="javascript:void(0)" onclick="rename(this)">Rename</a>
      <a href="javascript:void(0)" onclick="delActivity(this)">Delete</a>
    </div>
  </div>
  <div class="activity">
    <div class="acthead interface_element">
      <h3>Stop</h3>
      <a href="javascript:void(0)" onclick="rename(this)">Rename</a>
      <a href="javascript:void(0)" onclick="delActivity(this)">Delete</a>
    </div>
  </div>
</div>

Upvotes: 0

Views: 151

Answers (2)

znap026
znap026

Reputation: 439

I prefer using .bind(),

renamehead.addEventListener('click', rename.bind(this,renamehead));

Here you can pass in the context you wish to be present for instance i'm using the same this.

This will keep the scope you require.

Upvotes: -1

Alex Wayne
Alex Wayne

Reputation: 187034

Pass in real functions instead, and you can simply use the local variables.

renamehead.addEventListener('click', function() {
  rename(renamehead);
});

You really don't want to pass a string the execute to addEventListener. Passing in a real javascript function will give you the flexibility you need here.

Upvotes: 2

Related Questions