Skip to main content
1 de 4
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

let clickTimes = 0;
let btnRandomWord = document.getElementById('randomWordGen');
let wordOutput = document.getElementById('wordOutput');

btnRandomWord.addEventListener('click', function () {
  if (clickTimes > 3) {
    let 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