0

estoy trabajando en un generador de palabras aleatorias, he hecho que cada vez que pulse un boton aparezca una palabra:

    <?php
     $frases = array(
     1 => "Una lavadora",
     2 => "Un movil",
     3 => "Una muñeca",
     );

     $numero = rand (1,3);

     echo "$frases[$numero]";
      ?>
      <input type="button" value="iniciar" onclick="document.location.reload();">    

1-Cómo puedo hacer para que a la tercera vez que pulse el botón aparezca la palabra HAS PULSADO TRES VECES EL BOTÓN! y deje de generar palabras?

2-¿Hay alguna forma de hacerlo sin recargar la pagina entera?

0

2 respuestas 2

2

Agregando solo un contador y pidiendo la palabra por AJAX.

PHP

$frases = array(
  1 => "Una lavadora",
  2 => "Un movil",
  3 => "Una muñeca",
);

$numero = rand (1,3);

echo $frases[$numero];

HTML

<div class="word">
  <span id="wordOutput></span>
</div>
<button id="randomWordGen">Generate</button>

JS

document.addEventListener('DOMContentLoaded', function () {
  var clickTimes = 0;
  var btnRandomWord = document.getElementById('randomWordGen');
  var wordOutput = document.getElementById('wordOutput');

  btnRandomWord.addEventListener('click', function () {
    if (clickTimes < 3) {
      var request = new XMLHttpRequest();
      // método HTTP y URL
      request.open('GET', '/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) {
            wordOutput.textContent = request.responseText;
            clickTimes++;
          }
        }
      };
      request.send(); // se envía la petición
    } else {
      wordOutput.textContent = 'Has superado el límite palabras';
    }
  });
});

Lo anterior funcionará solo mientras no se recargue el documento, en caso se recargue, volverá a tener sus tres palabras. En caso desees que sea mientras el usuario tenga sesión, puedes usar en lugar del contador una cookie o mejor aún sessionStorage.

11
  • En programación decir "no me funciona" es igual a no decir nada. Mira la consola, ¿ves errores tanto en servidor y cliente?
    – gugadev
    Commented el 4 feb. 2017 a las 14:45
  • En el editor de codigo me aparecen estos dos errores en el .js : 1 Expected an identifier and instead saw 'let' let clickTimes =0; 1 Stopping (4% scanned). let clickTimes = 0; No sé cual puede ser el error. En la consola me aparece el siguiente error: generador.js:5 Uncaught TypeError: Cannot read property 'addEventListener' of null at generador.js:5 Commented el 4 feb. 2017 a las 15:00
  • Supongo estás usando ES5. En ese caso reemplaza let por var. El otro error te indica que btnRandomWord es null por lo que no existe <button id="randomWordGen">Generate</button> en tu HTML. No copies y pegues el código que te expongo aquí, reeplaza el HTML si lo deseas por el que tengas tú, solo ten en cuenta los id que usas tanto en el HTML como en el JavaScript.
    – gugadev
    Commented el 4 feb. 2017 a las 15:10
  • Me dice que no funciona el evento addEventListener (Uncaught TypeError: Cannot read property 'addEventListener' of null at generador.js:5) ... Me estoy volviendo loco... ¿sabes porqué no funciona? Commented el 4 feb. 2017 a las 15:39
  • ¿Agregaste el HTML que te puse?
    – gugadev
    Commented el 4 feb. 2017 a las 15:41
1

Otra forma de hacerlo:

PHP

<?php
// definimos un array de valores en php
$arrayPHP = array(
 0 =>"Una lavadora",
 1 => "Un movil",
 2 => "Una muñeca",
 );
?>

HTML

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p id="demo">Palabra!</p>
    <input type="button" value="iniciar" onclick="print()"> 
</body>

JavaScript

<script type="text/javascript">
// obtenemos el array de valores mediante la conversion a json del
// array de php
var arrayJS=<?php echo json_encode($arrayPHP);?>;

// Establecemos el valor minimo y maximo del array.
var max = <?= count($arrayPHP)-1 ?>;
var min = 0;
//Contador para controlar las pulsaciones del usuario.
var contador = 1;

function print() {
    var ind= randomIntFromInterval(min,max);
        if(contador <= 3) {
            document.getElementById("demo").innerHTML = arrayJS[ind];
            contador++;
        } else {
            document.getElementById("demo").innerHTML = "Ha llegado al maximo";
        }
}
//Genera numeros aleatorios entre un rango dado por parametro.
function randomIntFromInterval(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);
}

Convertimos un objeto PHP a JavaScript mediante var arrayJS=<?php echo json_encode($arrayPHP);?>;.

He tenido un problema al convertir el objeto y es que el indice del array en php debe comenzar en 0.

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.