En este tutorial aprenderemos a utilizar el elemento <input type="color"> de HTML5 y el método document.ElementById en JavaScript para cambiar el color de las paredes en una habitación.

¡Hola, amigos de DevCode! Hoy vamos a aprender el uso que le podemos dar a elemento  para cambiar el color de las paredes de un espacio de una casa.

Empecemos, en HTML añadimos un elemento  con el id de "espacio", la imagen que colocaremos tiene por característica de tener las paredes transparentes. Además un elemento input con el atributo type igual a "color", con el id de "favcolor" y valor inicial en value de un color rojo en hexadecimal.

En CSS damos a la imagen "espacio" un ancho predeterminado, además de las propiedades display con el keyword de block y margin con valores de 0 y auto para centrar la imagen. Recordemos que el elemento  y  tienen por defecto el valor de inline. Adicionalmente agregamos la propiedad background-color, con un valor de color rojo.

#espacio {
  width: 560px;
  display: block;
  margin: 0 auto;
  background-color: red;
}

Al elemento input lo centramos con las mismas propiedades de display y margin.

#favcolor {
  display: block;
  margin: 0 auto;
}

Ahora agregamos un evento al elemento input para que cuando ocurra un cambio, este evento dispare la función cambiarcolor.

En JavaScript creamos la función, y mediante el método getElementById hacemos un llamado al elemento input de id "favcolor" y extraemos el atributo "value" y almacenarlo en una variable de nombre color

let color = document.getElementById("favcolor").value;

Ahora para cambiar el color de las paredes tenemos que cambiar el color de fondo en la propiedad background-color. Para esto mediante el método getElementById, ahora hacemos un llamado a la imagen que lleva por id "espacio, y mediante el método style, seguido de la propiedad a ser cambiada (en este caso "backgroundColor") le asignamos el valor almacenado en la variable color.

document.getElementById("espacio").style.backgroundColor = color;

Con esto al hacer un cambio en la selección del color, este será utilizado como fondo de la imagen automáticamente.

Si deseas aprender mas de programación, recuerda que en DevCode tenemos de forma totalmente gratuita el Curso de HTML y CSS y muchos otros cursos esperando por ti para ayudarte a complementar tu aprendizaje. No olvides compartir el tutorial con tus amigos y dejarnos tus dudas u opiniones en la caja de comentarios.