No puedo guardar algunos valores ( que obtengo a través de un for loop ) en un HTML button como los data- attributes de los botones.
En el siguiente código for loop , notará cómo indico que los valores se capturan correctamente al cerrar sesión en la console . ¿Por qué no puedo guardarlos en los atributos de datos de los botones? ¿Alguien puede señalar dónde me estoy equivocando?
Encuentre a continuación el código de mi for loop y sus resultados console log exitosos:
contractMethods.viewAllGifts().call( (error, result)=> { if(!error){ result.forEach((item, index)=>{ console.log("item.tokenId: " +item.tokenId); console.log("item.messageToRecipient: " +item.messageToRecipient); $('#assetInheritor').append('<button type="button" value=' + item.tokenId + ' ' + 'data-value1=' + item.messageToRecipient + ' ' + ' onclick="fetchValue(this)"> ' + item.tokenId + '</button> '); }) } }) La console en el código anterior, cierra la sesión con éxito:
item.tokenId: 100 item.messageToRecipient: I love you Mamma! Encuentre a continuación el código de onclick="fetchValue() y sus resultados erróneos:
function fetchValue(_button){ console.log(_button.value); console.log(_button.dataset.value1) } La primera console se desconecta: 100 , en lugar de: 100
mientras que la segunda console cierra la sesión: I en lugar de: ¡Te amo mamá!
¿Puede alguien amablemente señalar dónde me estoy equivocando?
gracias el segundo
Veo que su problema es que está agregando un botón cada vez para un solo. En lugar de configurar un botón como ese, use attr para configurar un atributo después de agregar el botón:
// Dummy data const result = [ { tokenId: 100, messageToRecipient: "Message 1", }, { tokenId: 101, messageToRecipient: "Message 2", } ] // updated forEach result.forEach((item, index)=>{ $('#assetInheritor').append(`<button id="button-${index}" onclick="fetchValue(this)">Button ${index + 1}</button> <br/> <br/>`); $(`#button-${index}`).attr("data-value1", item.tokenId); $(`#button-${index}`).attr("data-value2", item.messageToRecipient); }) // updated function function fetchValue(_button){ console.log(_button.dataset.value1); console.log(_button.dataset.value2) } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="assetInheritor"></div>