-3

Tengo el siguiente código Javascript y PHP, pero lo voy a subir a un servidor que no soporta PHP, así que necesito eliminar el PHP del código, hacerlo sin mencionar ningún tipo de PHP.

Adjunto el código para ver si me podéis ayudar a solucionarlo.

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>
            

3
  • "podeis ayudar a solucionarlo" o "hacérmelo" ? Qué has hecho tú para empezar a eliminar el PHP? donde te ha fallado?
    – lois6b
    Commented el 7 feb. 2017 a las 8:30
  • 1
    Yo malgasté mi tiempo para resolver su mensaje anterior y ni siquiera me lo agradeció, ni marcó la pregunta como correcta ni la votó ni nada :/ volveré a ayudarle con ésta pero veo poco rentable el tiempo que invierta en él. Commented el 7 feb. 2017 a las 8:44
  • @antonio-Ángel-estrada-pérez, ¿en qué soluciona tu problema la respuesta que has marcado como correcta? No es un sustituto del código PHP (al menos a primera vista). Commented el 7 feb. 2017 a las 20:42

2 respuestas 2

3

Veamos si te sirve esta solución:

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>

Con poco esfuerzo puedes agregarlo a tu código.

3
  • Ya lo he solucionado, por eso no he respondido, he llamado a un archivo html en vez de al php: request.open('GET', 'css/hola.html?clickTimes='+clickTimes); .. no se si está bien pero bueno espero que funcione, y lo siento @OscarGarcia no he tenido tiempo de revistar tu respuesta, cuando tenga un hueco lo hago y veo . Pido disculpas. Commented el 7 feb. 2017 a las 9:28
  • Tu archivo css/hola.html es estático. Si tu servidor no soporta PHP deberás consultar si soporta algún lenguaje dinámico (Node.js, ASP.net, JSP, Python, etc). Si no es así esa llamada cargará el archivo HTML tal cual, sin importar qué parámetro le envíes por GET. Commented el 7 feb. 2017 a las 9:54
  • si, asp.net si lo soporta, tenia que maquetar una web, pero luego me dijeron que el servidor no soportaba php, asi que tuve que suprimirlo... de ahi toda esta movida. Al parecer usaban para los formularios asp.net ... nunca habia oido hablar de él, seguiré investigando para saber más. Commented el 7 feb. 2017 a las 18:41
0

A ver como dice Oscar la verdad es que tienes la solución alli. En tu servidor si no acepta código de lado del servidor simplemente no te va a funcionar ese arreglo ya que simplemente estar cargando el código php como un archivo html lo que te va a devolver el código php integro sin ejecutarse asi de simple.

Ahora bien lo que mejor puedes hacer es aplicar la solución de oscar Elimina el código del ajax e invoca la función de cargar y listo asi de fácil.

//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);

y así tendrás el problema resuelto, no esta complicado.

2
  • Al código de esta pregunta le falta la parte de PHP (ha dejado las cadenas vacías). Puedes ver su código en su mensaje anterior. No veo en tu código cómo modificas el DOM para mostrar un mensaje diferente tras cada clic en el botón (ver la parte del btnRandomWord.addEventListener('click', function(){...})), que es justo la parte que llama al PHP. Commented el 7 feb. 2017 a las 20:38
  • Si oscar falta pero no tendria que modicar su codigo php ya que simplemente tendria que cambiar el front..!!
    – kromander
    Commented el 15 mar. 2017 a las 10:03

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.