Hola buen día, mi problema es que necesito que al darle clic en el recuadro de color, aparezca el <p> del div (ahora está "display:none;" en css) ya traté varios métodos de internet, pero ninguno me funciona... si alguen puede ayudar se lo agradecería bastante, perdonen la molestia. aquí debajo agrego mi código:
HTML-----------------------------------------------------------------
<div id = 'square'></div>
<div class="amarillo" onClick = "changeColor('yellow'); ShowWord();"><p>amarillo</p></div>
<div class="azul" onClick = "changeColor('blue'); ShowWord();"><p>azul</p></div>
<div class="rojo" onClick = "changeColor('red'); ShowWord();"><p>rojo</p></div>
CCS---------------------------------------------------------------
#square{
width: 50%;
height: 100%;
background-color: white;
position: absolute;
right: 0px;
top: 0px;
background-image: url("http://www.taisatextil.com/wp-content/uploads/2018/03/1-Blanco.jpg");
background-blend-mode: multiply;
}
.rojo p {
position: absolute;
left: 50%;
top: 75px;
background-color:#000;
color: #fff;
padding: 7px 22px;
font-size:22px;
text-transform:uppercase;
font-family: 'GothamNarrow-Medium';
letter-spacing:2px;
display:none;
}
.amarillo p {
position: absolute;
left: 50%;
top: 75px;
background-color:#000;
color: #fff;
padding: 7px 22px;
font-size:22px;
text-transform:uppercase;
font-family: 'GothamNarrow-Medium';
letter-spacing:2px;
display:none;
}
.azul p {
position: absolute;
left: 50%;
top: 75px;
background-color:#000;
color: #fff;
padding: 7px 22px;
font-size:22px;
text-transform:uppercase;
font-family: 'GothamNarrow-Medium';
letter-spacing:2px;
display:none;
}
.azul {
width: 20px;
height: 20px;
background-color: blue;
border: 1px solid blue;
cursor:pointer;
display: inline-block;
}
.rojo {
width: 20px;
height: 20px;
background-color: red;
border: 1px solid red;
cursor:pointer;
display: inline-block;
}
.amarillo {
width: 20px;
height: 20px;
background-color: yellow;
border: 1px solid yellow;
cursor:pointer;
display: inline-block;
}
JAVASCRIPT------------------------------------------------------------
function changeColor(color){
var elem = document.getElementById( 'square' );
elem.style.backgroundColor =color;
}
(No se puede continuar esta discusión porque tiene más de dos meses de antigüedad. Si tienes dudas parecidas, abre un nuevo hilo.)