[ Foro de Javascript ]

aparecer onClick

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;
}