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'
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');
contenedor_formulario.classList.add('visible');
wordOutput.textContent = request.responseText;
clickTimes++;
}, 1000);
}
}
};
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');
}
});
});
quiero hacer un codigo con js que cuando pulse un boton cambie una imagen que hay por un gif y que se muestre todo el gif. Alguien me puede ayudar a generar el código? el que tengo no funciona como quiero que funcione.
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'
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');
window.setTimeout(function () {
btnRandomWord.classList.remove('invisible'); //muestra el boton generar palabra
loadingImage.classList.remove('visible');
ideaImage.classList.add('visible');
contenedor_formulario.classList.add('visible');
}, 5000);
} 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');
}
});
});
<div id="final">
<img src="images/mini_auto.png" alt="final" title="final"/><br>
Nuevo mini
</div>
<div id="inicial">
<img src="images/icono_generar_simple.png" alt="inicial" title="inicial"/><br>
</div><br>
<div id="idea">
<img src="images/robot_idea.png" alt="idea" title="idea"/><br>
</div>
<div id="pensando">
<img src="css/images/gif_prueba01.gif" alt="pensando" title="Cocinando"/><br>
</div>
<br>
<div class="word">
<span id="wordOutput" class="ocultar_idea_cuando_carga">
</span>
<br><button id="randomWordGen">GENERAR IDEA</button><br>
</div>