Estoy trabajando en un juego que permite a los usuarios seleccionar qué letras quieren usar para el juego. Cada letra es un botón idéntico al de abajo, con disabled = true .

 <button id = "a" disabled = "true" style={{ fontSize: '8vh', height: '100%', width: '8%', cursor: 'pointer' }} onMouseDown={function () { var a= "A"; addToDisplayList(a); }}> A </button>

Antes de que el usuario pueda seleccionar las letras, debe hacer clic en el botón Seleccionar letras , que restablece la matriz que contiene las letras seleccionadas y elimina el atributo de desactivación de todos los botones de letras. El código para el botón Seleccionar letras está debajo.

 <button id = "clear" style={{ fontSize: '8vh', height: '100%', cursor: 'pointer' }} onMouseDown={function () { setToZero(); for(var i=0; i<letterList.length; i++){ document.getElementById(letterList.charAt(i)).removeAttribute("disabled"); } }}> Select Letters </button>

Cuando hago clic en Seleccionar letras para eliminar el atributo deshabilitado de todos los botones de letras, se deshabilitan y parecen estar habilitados. Sin embargo, cuando hago clic en cualquiera de los botones de letras, no ejecutan sus funciones onMouseDown.