Question 50274 in Javascript Question posted in
A very good W3school tutorial can be found here.

Call a function and pass a parameter in JS – Javascript

I am trying to call a function called mytask and pass index variable as a parameter. However, it seems that the compiler doesn’t recognize index.

Here is my code:

fillTask();

function fillTask() {
  tasksList.innerHTML = '';
  let index = 0;
  for (task of tasks) {
    let li = document.createElement('li');
    li.innerHTML = ' <button onclick="mytask(${index})" class="delete">Delete</button> ';
    tasksList.appendChild(li);
    //index++;
  }
}

//Delete task
function mytask(index) {
  alert("Task has been deleted");
}

When I click on the delete button I am getting this error in my console:
Uncaught SyntaxError: missing ) after argument list (at index.html:1:8)

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Replacing single quotes with backticks solved my problem like follows:

    li.innerHTML=  ` <button onclick="mytask(${index})" class="delete">Delete</button> `;

  2. 0

    simply use backticks “ instead of single quotes ”. Otherwise string interpolation is not recognised by the interpretor.

    
    fillTask();

function fillTask(){
  tasksList.innerHTML = '';
  let index = 0;
  for (task of tasks) {
    let li = document.createElement('li');
    li.innerHTML=  ` <button onclick="mytask(${index})" class="delete">Delete</button> `;
    tasksList.appendChild(li);
    index++;
      }
}

//Delete task
function mytask(index){
alert("Task has been deleted");
}
    Login or Signup to reply.
  3. 0

    Although inserting a number into a string of HTML with an inline event handler will work, you shouldn’t do it. It’s fragile and can easily lead to script injection vulnerabilities (XSS), and prevents you from using a Content-Security-Policy that would effectively limit the same risks elsewhere.

    You’re already halfway to doing the right thing by using the DOM to create the list item. Follow through and avoid embedding JavaScript in HTML in JavaScript:

    fillTask();

function fillTask() {
  tasksList.textContent = '';

  let index = 0;
  for (let task of tasks) {
    let thisIndex = index;
    index++;

    let deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete';
    deleteButton.onclick = () => {
      mytask(thisIndex);
    };

    let li = document.createElement('li');
    li.append(' ', deleteButton);
    tasksList.append(li);
  }
}

    Note: writing it this way does need a separate variable thisIndex scoped to the loop iteration. Separating out creating a list item into a new function might be cleaner in this and other respects:

    fillTask();

function createTaskItem(index) {
  let deleteButton = document.createElement('button');
  deleteButton.textContent = 'Delete';
  deleteButton.onclick = () => {
    mytask(index);
  };

  let li = document.createElement('li');
  li.append(' ', deleteButton);
  return li;
}

function fillTask() {
  tasksList.textContent = '';

  let index = 0;
  for (let task of tasks) {
    tasksList.append(createTaskItem(index));
    index++;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search