Home / Questions / 48111
Accepted
Antonio Ángel Estrada Pérez
Asked: 2020-02-08 00:20:24 +0800 CST 2020-02-08 00:20:24 +0800 CST

Remove code to do it without PHP

  • 772

I have the following Javascript and PHP code, but I'm going to upload it to a server that doesn't support PHP, so I need to remove the PHP from the code, do it without mentioning any PHP at all.

I attach the code to see if you can help me to solve it.

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');
    var contenedorWord = document.getElementById('wordOutput');
    var contenedor_formulario = document.getElementById('contenedor_formulario');
    
    
    if(clickTimes == 0){
        ideaImage.classList.remove('visible');
        inicialImage.classList.add('visible');
        ocultarCarga.classList.add('visible');
        contenedorWord.classList.remove('visible');

    }

  btnRandomWord.addEventListener('click', function () {
    if (clickTimes < 3) {
        ocultarCarga.remove('visible'); // elimina la clase CSS 'visible'
        inicialImage.remove('visible'); // elimina la clase CSS 'visible'
   
        
        ideaImage.classList.remove('visible'); // elimina la clase CSS 'visible'
        btnRandomWord.classList.add('invisible'); //elimina boton generar palabra
        contenedorWord.classList.add('visible');
 

      var request = new XMLHttpRequest();
      // método HTTP y URL
      request.open('GET', 'php/randomwordgen.php?clickTimes='+clickTimes);
      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 () {
                
                loadingImage.classList.remove('visible');
                ideaImage.classList.add('visible');
                contenedor_formulario.classList.add('visible');
                
                wordOutput.textContent = request.responseText;
                clickTimes++;
            }, 300);
          }
        }
      };
      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

if(isset($_GET['clickTimes'])){
 $numero=$_GET['clickTimes']+1;
   $frases = array(
      1 => "",
      2 => "",
      3 => "",
      4 => "",

    );

   echo $frases[$numero];
}
?>
            <div id="final">
                <img src="css/images/gif_prueba01.gif" alt="final" title="final"/><br>
               Nuevo mini
            </div>

            <div id="inicial" class="wow pulse">
                <img src="css/images/icono_generar_simple.png" alt="inicial" title="inicial"/><br>
                
            </div><br>

            <div id="idea">
                <img src="css/images/gif_prueba01.gif" alt="idea" title="idea"/><br>
            </div>

            <div id="pensando">

                <img src="css/images/Gif_Landing.gif" alt="pensando" title="Pensando"/><br>
               
            </div>
<br>

            <div class="word">
            <span id="wordOutput" class="ocultar_idea_cuando_carga">
            </span>
            <br><button id="randomWordGen">GENERAR IDEA</button><br>
                
            </div>

javascript

2 Answers

  1. Let's see if this solution works for you:

    var clickTimes = 0;
function cargar() {
  frases = [
    'Mi mamá me mima',
    'Yo mimo a mi mamá',
    'En un lugar de la mancha',
    'De cuyo nombre no quiero acordarme',
  ];
  document
    .getElementById('wordOutput')
    .innerHTML = frases[clickTimes];
  clickTimes = (++clickTimes) % frases.length;
}
    <div class="word">
  <span id="wordOutput" class="ocultar_idea_cuando_carga">
  </span>
  <br/>
  <button id="randomWordGen" onclick="cargar()">
    GENERAR IDEA
  </button>
</div>

    With little effort you can add it to your code.

    • 3
  2. Best Answer

    Let's see how Oscar says, the truth is that you have the solution there. On your server, if you don't accept server-side code, that arrangement simply won't work for you, since you will simply be loading the php code as an html file, which will return the entire php code without being executed, that simple.

    Now, the best thing you can do is apply oscar's solution. Eliminate the ajax code and invoke the load function and that's it, that's it.

    //Elimina este Trozo de código
var request = new XMLHttpRequest();
  // método HTTP y URL
  request.open('GET', 'php/randomwordgen.php?clickTimes='+clickTimes);
  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 () {

            loadingImage.classList.remove('visible');
            ideaImage.classList.add('visible');
            contenedor_formulario.classList.add('visible');

            wordOutput.textContent = request.responseText;
            clickTimes++;
        }, 300);
      }
    }
  };
  request.send(); // se envía la petición
 //--- Hasta aquí


 // Y luego colocas la la invocación de la función cargar
  cargar();
  // Incluso puedes agregar tu función de retardo para ocultar y mostrar lo que necesitas.
  window.setTimeout(function () {
            loadingImage.classList.remove('visible');
            ideaImage.classList.add('visible');
            contenedor_formulario.classList.add('visible');
        }, 300);

    and so you will have the problem solved, it is not complicated.

    • 0