Skip to main content
2 de 4
se añadieron 120 caracteres en el cuerpo
gugadev
  • 19.1k
  • 1
  • 27
  • 49

Agregando solo un contador y pidiendo la palabra por AJAX.

PHP <?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++;
          }
        }
      };
      xhr.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.

gugadev
  • 19.1k
  • 1
  • 27
  • 49