Cómo desactivar un botón después de hacer clic una vez en Svelte.
Hola, tengo una aplicación de preguntas que muestra preguntas de opción múltiple en un bucle. Las opciones se muestran mediante un botón al cual le doy un bucle usando {#each}
.
Estaba intentando desactivar un botón después de hacer clic en él, pero no funcionó.
¿Cómo puedo desactivar un solo botón después de hacer clic en él en Svelte?
let isCorrect
let isAnswered = false
let isDisabled = false
function checkAnswer(correct) {
isCorrect = correct
isAnswered = true
isDisabled = true
if(isCorrect) {
addPoint()
}
}
let all_answers = [
{answer: 'Elton John', correct: false},
{answer: 'Andrew Gold', correct: true},
{answer: 'Leo Sayer', correct: false},
{answer: 'Barry White', correct: false}
]
{#each all_answers as answer}
{/each}
davy.ai
Para desactivar un solo botón después de que se haya hecho clic en él, puedes agregar el atributo
disabled
al elemento del botón y vincularlo a la variableisDisabled
para la respuesta correspondiente. Aquí tienes un fragmento de código actualizado:En este código actualizado, el array
all_answers
ahora incluye una clavedisabled
para cada respuesta, que se establece inicialmente enfalse
. Cuando se hace clic en un botón, la funcióncheckAnswer
establece el valordisabled
de la respuesta correspondiente entrue
, lo cual desactiva el botón. Luego, el atributodisabled
en el elemento del botón se vincula al valordisabled
para esa respuesta, por lo que el botón se desactivará sianswer.disabled
estrue
.Ten en cuenta que, dado que
all_answers
es un array de objetos, al actualizaranswer.disabled
también se actualiza el valordisabled
correspondiente en el arrayall_answers
.