unerwartete Token-Fehler beim Onclick

mit diese ist mein Codeunerwartete Token-Fehler beim Onclick

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('');

ich nicht nur, warum ich diese unerwarteten Token Fehler bekommen, dass Punkte auf die html. Ich bin mir ziemlich sicher, dass es sehr dumm ist, aber ich kann einfach nicht verstehen, wo es ist.

Quelle

2017-06-04 Lido Fernandez

Sie können eine Funktion in einem Vorlagenliteral nicht ersetzen. Es fügt einfach den Quellcode der Funktion ein.

Es gibt auch wenig Sinn in diesem Fall. Sie können den Funktionskörper einfach in das Attribut onclick setzen.

Quelle

2017-06-04 22:00:54 Barmar

ok Also gibt es keine Möglichkeit, dass ich diese Funktion zum Beispiel hinzufügen kann: Funktion clickHere() {console.log ('hi')} –

Sie können die Funktion definieren in einem '

Ich empfehle Ihnen, Clientseite Templating-Engine zu verwenden, um solche Probleme zu vermeiden. Zum Beispiel mustachejs.

Aber über fix (versuchen Sie dieses):

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>

Quelle

2017-06-04 22:05:13 num8er

Am Ende ich diese Lösung verwendet, es ist schade, weil der andere kürzer war:

const products = productArray.map(product => { 
    const tr = document.createElement('tr'); 
    const td1 = document.createElement('td'); 
    const td2 = document.createElement('td'); 
    const td3 = document.createElement('td'); 
    const td4 = document.createElement('button'); 

    td4.addEventListener('click',() => 
     processSearch(product.id) 
    ); 

    td1.appendChild(document.createTextNode(product.id)); 
    td2.appendChild(document.createTextNode(product.type)); 
    td3.appendChild(document.createTextNode(product.price)); 
    td4.appendChild(document.createTextNode('Examine')); 
    tr.appendChild(td1); 
    tr.appendChild(td2); 
    tr.appendChild(td3); 
    tr.appendChild(td4); 

    return tableBody.appendChild(tr); 
    });

Quelle

2017-06-04 23:45:52

Verwandte Themen

unerwartete Token-Fehler beim Onclick

Antwort

Verwandte Themen