By php I have a word list, which I want to appear one by one when I click on JS. Right now with the code that I have I show the words one by one but messy. What I want to do is show them in an orderly way as I have written them in the code.
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');
if(clickTimes == 0){
ideaImage.classList.remove('visible');
inicialImage.classList.add('visible');
ocultarCarga.classList.add('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
var request = new XMLHttpRequest();
// método HTTP y URL
request.open('GET', 'php/randomwordgen.php');
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++;
}, 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');
}
});
});<?php
$frases = array(
1 => "MINIPIMER",
2 => "MINIBAR",
3 => "MINIFALDA",
);
$numero = rand (1,6);
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>I am showing by php an array of numbers, right now I show it with the rand function so that they go out of order. How do I make them appear orderly?
<?php
$frases = array(
1 => "Una lavadora",
2 => "Un movil",
3 => "Una muñeca",
4 => "Un Pecho",
5 => "Una caca",
6 => "JOSEJUAN",
);
$numero = rand (1,6);
echo $frases[$numero];
?>