Tengo el siguiente código Javascript y PHP, pero lo voy a subir a un servidor que no soporta PHP, así que necesito eliminar el PHP del código, hacerlo sin mencionar ningún tipo de PHP.
Adjunto el código para ver si me podéis ayudar a solucionarlo.
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 contenedor_formulario = document.getElementById('contenedor_formulario');
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'
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 () {
loadingImage.classList.remove('visible');
ideaImage.classList.add('visible');
contenedor_formulario.classList.add('visible');
wordOutput.textContent = request.responseText;
clickTimes++;
}, 300);
}
}
};
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 MINI';
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 => "",
2 => "",
3 => "",
4 => "",
);
echo $frases[$numero];
}
?>
<div id="final">
<img src="css/images/gif_prueba01.gif" alt="final" title="final"/><br>
Nuevo mini
</div>
<div id="inicial" class="wow pulse">
<img src="css/images/icono_generar_simple.png" alt="inicial" title="inicial"/><br>
</div><br>
<div id="idea">
<img src="css/images/gif_prueba01.gif" alt="idea" title="idea"/><br>
</div>
<div id="pensando">
<img src="css/images/Gif_Landing.gif" alt="pensando" title="Pensando"/><br>
</div>
<br>
<div class="word">
<span id="wordOutput" class="ocultar_idea_cuando_carga">
</span>
<br><button id="randomWordGen">GENERAR IDEA</button><br>
</div>