2

Por php tengo una lista la palabra, que quiero que aparezcan una a una cuando pulso un boton por JS. Ahora mismo con el codigo que tengo muestro las palabras una a una pero desordenadas. Lo que quiero hacer es mostrarlas de forma ordenada tal y como las tengo escritas en el codigo.

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>

estoy mostrando por php un array de numeros, ahora mismo lo muestro con la funcion rand para que salgan desordenados. ¿Cómo hago para que se muestren ordenados?

<?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];

?>

4
  • 1
    Pero usando rand() ? el 6 feb. 2017 a las 11:46
  • Supongo que será eliminando rand e introducionado sort, pero al mostrarlo no me sale bien, me sale siempre el numero 3 el 6 feb. 2017 a las 11:57
  • haz intentado con un simple for o foreach?... ósea ... lo que quieres es que te salga (echo) el array tal cual y ordenado? el 6 feb. 2017 a las 11:59
  • Sí, quiero que salga tal cual el 6 feb. 2017 a las 12:07

1 respuesta 1

1

para solucionar este problema deberias realizar lo siguiente, en el js pasarle por parametro el clickTimes de la siguiente manera:

request.open('GET', 'php/randomwordgen.php?clickTimes='+clickTimes);

y e el php hacer un get sobre esta variable:

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];
}
10
  • me sale siempre el numero 3, cual es el error? el 6 feb. 2017 a las 11:58
  • que es lo que haces para que te salga el 3?una vez apliques sort debes recorrerlo al array,ahi te lo agrego en la respuesta. el 6 feb. 2017 a las 11:59
  • Se trata de un boton, cada vez que pulso el boton quiero que aparezca uno, no todos de golpe. Es decir que muestre un valor, el codigo que me has compartido los muestra todos no? el 6 feb. 2017 a las 12:09
  • 1
    @AntonioÁngelEstradaPérez - deberías explicar mejor tu pregunta.. ya que estás añadiendo aquí tu objetivo... Es decir: quieres usar un botón para que te salga en orden uno por uno del 1 al 6 y solo usando PHP es cierto? el 6 feb. 2017 a las 12:15
  • 1
    Muchas gracias @DaniloBustos es exactamente lo que buscaba el 6 feb. 2017 a las 12:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.