encountered an unexpected token error while trying to implement the onclick

Question

encountered an unexpected token error while trying to implement the onclick

Here's the code I've been working on:

  const products = productArray.map(product =>
`
<tr>
  <td>${product.id}</td>
  <td>${product.type}</td>
  <td>${product.price}</td>
  <td><button onclick="${() => console.log('hello world')}">Examine</button></td>
</tr>
`
  );
  return tableBody.innerHTML = products.join('');

I'm stumped by this unexpected token error that keeps pointing to the HTML in my code. It seems like it should be a simple fix, but I can't seem to locate the issue. https://i.sstatic.net/Th7ka.png https://i.sstatic.net/YKI71.png

javascript arrays string ecmascript-6

Answer 1

Answer №1

When using a template literal, it is not possible to substitute a function directly. Instead, the source code of the function will be inserted.

In this scenario, there isn't much benefit in attempting to replace the function within the template literal. It would be more practical to include the function body within an onclick attribute.

  const items = itemArray.map(item =>
`
<tr>
  <td>${item.id}</td>
  <td>${item.category}</td>
  <td>${item.price}</td>
  <td><button onclick="console.log('hello world')">View Item</button></td>
</tr>
`
  );
  return tableContent.innerHTML = items.join('');

Answer 2

When using a template literal, it is not possible to substitute a function directly. Instead, the source code of the function will be inserted.

In this scenario, there isn't much benefit in attempting to replace the function within the template literal. It would be more practical to include the function body within an onclick attribute.

  const items = itemArray.map(item =>
`
<tr>
  <td>${item.id}</td>
  <td>${item.category}</td>
  <td>${item.price}</td>
  <td><button onclick="console.log('hello world')">View Item</button></td>
</tr>
`
  );
  return tableContent.innerHTML = items.join('');

Answer 3

Answer №2

I suggest using a clientside templating engine to prevent encountering similar issues. One great option is mustachejs.

Here's a potential fix to consider:

const tableBody = document.getElementById('productsTable');

const productArray = [
  {id: 1, type: 'something', price: 100},
  {id: 2, type: 'samething', price: 120}
];
const products = productArray.map(product =>
`
<tr>
  <td>${product.id}</td>
  <td>${product.type}</td>
  <td>${product.price}</td>
  <td><button onclick="(() => {alert('${product.id} ${product.type}');})()">Examine</button></td>
</tr>
`
  );
tableBody.innerHTML = products.join('');

<table id="productsTable">
</table>

Answer 4

I suggest using a clientside templating engine to prevent encountering similar issues. One great option is mustachejs.

Here's a potential fix to consider:

const tableBody = document.getElementById('productsTable');

const productArray = [
  {id: 1, type: 'something', price: 100},
  {id: 2, type: 'samething', price: 120}
];
const products = productArray.map(product =>
`
<tr>
  <td>${product.id}</td>
  <td>${product.type}</td>
  <td>${product.price}</td>
  <td><button onclick="(() => {alert('${product.id} ${product.type}');})()">Examine</button></td>
</tr>
`
  );
tableBody.innerHTML = products.join('');

<table id="productsTable">
</table>

Answer 5

Answer №3

After exploring various options, I ultimately settled on this particular approach, although I must admit that the alternative method was more concise:

const items = itemArray.map(item => {
    const row = document.createElement('tr');
    const cell1 = document.createElement('td');
    const cell2 = document.createElement('td');
    const cell3 = document.createElement('td');
    const cell4 = document.createElement('button');

    cell4.addEventListener('click', () =>
      executeSearch(item.id)
    );

    cell1.appendChild(document.createTextNode(item.id));
    cell2.appendChild(document.createTextNode(item.type));
    cell3.appendChild(document.createTextNode(item.price));
    cell4.appendChild(document.createTextNode('View Details'));
    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);
    row.appendChild(cell4);

    return tableBody.appendChild(row);
  });

Answer 6

After exploring various options, I ultimately settled on this particular approach, although I must admit that the alternative method was more concise:

const items = itemArray.map(item => {
    const row = document.createElement('tr');
    const cell1 = document.createElement('td');
    const cell2 = document.createElement('td');
    const cell3 = document.createElement('td');
    const cell4 = document.createElement('button');

    cell4.addEventListener('click', () =>
      executeSearch(item.id)
    );

    cell1.appendChild(document.createTextNode(item.id));
    cell2.appendChild(document.createTextNode(item.type));
    cell3.appendChild(document.createTextNode(item.price));
    cell4.appendChild(document.createTextNode('View Details'));
    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);
    row.appendChild(cell4);

    return tableBody.appendChild(row);
  });

encountered an unexpected token error while trying to implement the onclick

Answer №1

Answer №2

Answer №3

Similar questions

Retrieve the data from every dropdown menu

Utilizing Vue.js with Electron: Establishing seamless data synchronization between backend and frontend

Sorry, we encountered a snipcart issue: The public API key was not found. To fix this, please ensure that the attribute data-api-key is

Verify that the input is zero and then proceed to deactivate the submit button if it is indeed zero in AngularJS

What is the best way to run a scheduled task automatically using node-cron?

Calculate the unique UV coordinates for a custom Buffer Geometry in THREE.JS

When transferring files to the src/pages directory in Next.js, the custom _app and _document components are not recognized

Unable to establish a connection with the browser using Socket.IO Spring server, but it works successfully when connecting with

JavaScript function to substitute instead of writing

Utilize the For Each Statement to iterate over a two-dimensional array row by row, rather than by column

Retrieving user input from an angular controller function

When validating an array in JavaScript, it is important to note that not all elements may be displayed. Only the last variable of each element will

What are the steps to refresh the content in a glightbox slider?

The UTF-8 encoded string in Node.js displays a mysterious black question mark

Comparing jQuery Mobile and Sencha Touch: Which is the Best

Building secure applications with React and Express using private routes

Is there a way to divide a string and insert something into the new array that is created?

Click event being set within a template literal

Utilizing AngularJS: Triggering a controller function from a directive

When using 'passport.authenticate("google")' on the React client, the redirection process is not working properly