Tengo una tabla con una lista de elementos que tiene un botón en cada fila, y quiero que cada botón solo se haga clic una vez y luego desaparezca después de hacer clic una vez, pero los otros botones permanecen hasta que se haga clic en ellos.
Ya tengo el botón vinculado a una acción y he intentado poner una identificación con el botón y hacer document.getElementById('creditBtn').style.display='none sin embargo, no oculta el botón.
function submitCredit(reviewerId, reviewId) { let socialCredit = document.getElementById('socialCredit').value; const body1 = { credit: socialCredit }; axios.put('http://localhost:8080/awardCredit/:' + reviewerId, body1) .then(alert("Submitted Credit")); const body2 = { hasReward: 1 }; axios.put('http://localhost:8080/awardCredit/hasReward/:' + reviewId, body2) .then( window.location.href = "http://localhost:3000/viewreviews"); document.getElementById('creditBtn').style.display='none' } <h2>Completed Reviews</h2> <div className="writertable"> <table> <thead> <tr> <th>Title (Click to View Work)</th> <th>Award Credit(0-1)</th> </tr> </thead> <tbody> {reviewTaskDisplay.map((val) => ( <tr> <td onClick={(e) => viewReview(val.reviewId)}>{val.title}</td> <td><input type="number" id="socialCredit" name="socialCredit" min="0" max="1" defaultValue="0"/> <button id="creditBtn" onClick={(e) => submitCredit(val.reviewer, val.reviewId)}>Submit Credit</button></td> </tr> ))} </tbody> </table> </div>Cualquier consejo sobre cómo puedo hacer esto es apreciado
Marque esta línea <button id="creditBtn" onClick={(e) => submitCredit(val.reviewer, val.reviewId)}>Submit Credit</button></td>
Está creando todos los botones con la misma identificación y en la función de submitCredit de crédito, está aplicando display: none a lo mismo, lo que eliminará los botones creados con la misma identificación.
Puedes hacer algo como esto a continuación.
<button id={val.reviewId} onClick={(e) => submitCredit(val.reviewer, val.reviewId)}>Submit Credit</button></td> // submitCredit document.getElementById(reviewId).style.display='none'Verifique este sanbbox