document.addEventListener('DOMContentLoaded', function () {
var clickTimes = 0;
var inicialImage = document.getElementById('inicial');
var loadingImage = document.getElementById('pensando');
var ideaImage = document.getElementById('idea');
var finalImage = document.getElementById('final');
var btnRandomWord = document.getElementById('randomWordGen');
var wordOutput = document.getElementById('wordOutput');
var ocultarCarga = document.getElementById('ocultar_mientras_carga');
var contenedorWord = document.getElementById('wordOutput');
var ocultarIdeaMientrasCarga =document.getElementById('ocultar_idea_cuando_carga');
if(clickTimes == 0){
ideaImage.classList.remove('visible');
inicialImage.classList.add('visible');
ocultarCarga.classList.add('visible');
contenedorWord.classList.remove('visible');
}
btnRandomWord.addEventListener('click', function () {
if (clickTimes < 3) {
ocultarCarga.remove('visible'); // elimina la clase CSS 'visible'
inicialImage.remove('visible'); // elimina la clase CSS 'visible'
loadingImage.classList.add('visible'); // agrega la clase CSS 'visible'
ideaImage.classList.remove('visible'); // elimina la clase CSS 'visible'
btnRandomWord.classList.add('invisible'); //elimina boton generar palabra
contenedorWord.classList.add('visible');
var request = new XMLHttpRequest();
// método HTTP y URL
request.open('GET', 'php/randomwordgen.php?clickTimes='+clickTimes);
request.onload = function () {
// estado 4 = petición completada y respuesta recibida
if (request.readyState === 4) {
// código HTTP 200 = petición exitosa
if (request.status === 200) {
// se define un timeout de 2.5 segundos (ms)
window.setTimeout(function () {
btnRandomWord.classList.remove('invisible'); //muestra el boton generar palabra
loadingImage.classList.remove('visible');
ideaImage.classList.add('visible');
wordOutput.textContent = request.responseText;
clickTimes++;
}, 2000);
}
}
};
request.send(); // se envía la petición
} else {
loadingImage.classList.add('visible');
ideaImage.classList.remove('visible');
window.setTimeout(function () {
loadingImage.classList.remove('visible');
wordOutput.textContent = 'MEJOR REGALALE UN';
finalImage.classList.add('visible'); // añade la clase CSS 'visible'
}, 1000);
btnRandomWord.classList.add('invisible');
}
});
});
<?php
if(isset($_GET['clickTimes'])){
$numero=$_GET['clickTimes']+1;
$frases = array(
1 => "paraguas",
2 => "bata",
3 => "ordenador",
4 => "Un Pecho",
);
echo $frases[$numero];
}
?>
<div id="final">
<img src="images/model_new_mini_one.png" alt="final" title="final"/>
Nuevo mini
</div>
<div id="inicial">
<img src="images/cocinando.gif" alt="inicial" title="inicial"/>
Click para pensar una idea
</div>
<div id="idea">
<img src="images/idea.gif" alt="idea" title="idea"/>
Tenemos una idea!
</div>
<div id="pensando">
<img src="images/hsk.gif" alt="cocinando" title="Cocinando"/>
<p>Estamos pensado una idea...</p>
</div>
<div class="word">
<span id="wordOutput"></span>
<button id="randomWordGen">Generate</button>
</div>
tengo un codigo php con un array, al que le quiero añadir un estilo para editarlo por css. Cómo podria hacerlo?
<?php
if(isset($_GET['clickTimes'])){
$numero=$_GET['clickTimes']+1;
$frases = array(
1 => "Una lavadora",
2 => "Un movil",
3 => "Una muñeca",
4 => "Un Pecho",
5 => "Una caca",
6 => "JOSEJUAN",
);
echo $frases[$numero];
}
?>
Querría añadir un estilo por ejemplo 1=> "<span class="uno">UNA</span>lavadora"