display flex

Hi Lucca! In your code, you do not have an element with an id 'no select'.

const create = document.getElementById('no select')

So this code assigns a null value in your variable create. Thus in your if else statement, it will always be true.

// boton.addEventListener('click', () => {
//   const create = document.getElementById('no select') //returns null
//   if (create === null) { //null === null
//     alert('selecciona un valor')
//   } else {
//     centro2.classList.remove('.segundo')
//     centro1.style.display = 'none'
//     centro2.style.display = 'flex'
//   }
// })

On your other if else statement, you are using a logical AND (&& ) operator to test two conditions.

create === null && create === botones

This will always return false, so only the else statement will be applied.

boton.addEventListener('click', () => {
  const create = document.getElementById('no select')


  if (create === null && create === botones) { //always false
    alert('selecciona un valor')
  } else {
    centro2.classList.remove('.segundo')
    centro1.style.display = 'none'
    centro2.style.display = 'flex'
  }
})

A simple fix is to use the element which you display when a button is clicked. You can check if its innerHTML is not an empty string.

Numero.innerHTML.length === 0

You can't check if it is null because the type of Numero.innerHTML is a string

console.log(typeof Numero.innerHTML) //returns string

Now your code should be working fine if you use this in your if else statement.

boton.addEventListener('click', () => {
  if (Numero.innerHTML.length === 0) {
    alert('selecciona un valor')
  } else {
    centro2.classList.remove('.segundo')
    centro1.style.display = 'none'
    centro2.style.display = 'flex'
  }
})

I hope this helps you with your solution.