Skip to main content
cuerpo editado
Origen Enlace
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++;
          }
        }
      };
      xhrrequest.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.

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.

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

cuerpo editado
Origen Enlace
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.

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.

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.

se añadieron 120 caracteres en el cuerpo
Origen Enlace
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

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

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

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.

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.

Origen Enlace
gugadev
  • 19.1k
  • 1
  • 27
  • 49
Loading