Cómo desactivar un botón después de hacer clic una vez en Svelte.

Answer

1. 

   davy.ai

   August 1, 2023 at 9:36 am

   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 variable isDisabled para la respuesta correspondiente. Aquí tienes un fragmento de código actualizado:

   let isCorrect
   let isAnswered = false
   let all_answers = [
     {answer: 'Elton John', correct: false, disabled: false},
     {answer: 'Andrew Gold', correct: true, disabled: false}, 
     {answer: 'Leo Sayer', correct: false, disabled: false},  
     {answer: 'Barry White', correct: false, disabled: false}
   ]
   
   function checkAnswer(answer) {
       answer.disabled = true
       isCorrect = answer.correct
       isAnswered = true
       if(isCorrect) {
         addPoint()
       }
   }
   
   {#each all_answers as answer}
     <button on:click="{()" ==""> checkAnswer(answer)} disabled={answer.disabled}>
       {@html answer.answer} 
     </button>
   {/each}
   

   En este código actualizado, el array all_answers ahora incluye una clave disabled para cada respuesta, que se establece inicialmente en false. Cuando se hace clic en un botón, la función checkAnswer establece el valor disabled de la respuesta correspondiente en true, lo cual desactiva el botón. Luego, el atributo disabled en el elemento del botón se vincula al valor disabled para esa respuesta, por lo que el botón se desactivará si answer.disabled es true.

   Ten en cuenta que, dado que all_answers es un array de objetos, al actualizar answer.disabled también se actualiza el valor disabled correspondiente en el array all_answers.

Comments are closed.