Call a function and pass a parameter in JS

Question

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)

you aren't embedding the value in the string - use back ticks instead of single quotes — Daniel A. White, Apr 15 '23 at 21:56
in other words, the `${variable}` only works with ` quotes not ' or " — skara9, Apr 15 '23 at 21:58

Ry- · Answer 1 · 2023-04-15T22:12:49.023

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++;
  }
}

score 0 · Answer 2 · answered Apr 15 '23 at 22:03

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");
}

score -1 · Answer 3 · answered Apr 15 '23 at 22:01

-1

Replacing single quotes with backticks solved my problem like follows:

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

answered Apr 15 '23 at 22:01

Abod

39
5

Call a function and pass a parameter in JS

3 Answers3