1

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 ocultarIdeaMientrasCarga =document.getElementById('ocultar_idea_cuando_carga');
    
    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'
        loadingImage.classList.add('visible'); // agrega 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 () {
                btnRandomWord.classList.remove('invisible'); //muestra el boton generar palabra
                loadingImage.classList.remove('visible');
                ideaImage.classList.add('visible');
                wordOutput.textContent = request.responseText;
                clickTimes++;
            }, 2000);
          }
        }
      };
      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';
                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 => "paraguas",
      2 => "bata",
      3 => "ordenador",
      4 => "Un Pecho",

    );

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

    <div id="inicial">
        <img src="images/cocinando.gif" alt="inicial" title="inicial"/>
        Click para pensar una idea
    </div>
    
    <div id="idea">
        <img src="images/idea.gif" alt="idea" title="idea"/>
        Tenemos una idea!
    </div>
    
    <div id="pensando">

        <img src="images/hsk.gif" alt="cocinando" title="Cocinando"/>
        <p>Estamos pensado una idea...</p>
    </div>
    
    
    <div class="word">
      <span id="wordOutput"></span>
        <button id="randomWordGen">Generate</button>
    </div>

tengo un codigo php con un array, al que le quiero añadir un estilo para editarlo por css. Cómo podria hacerlo?

<?php

if(isset($_GET['clickTimes'])){
 $numero=$_GET['clickTimes']+1;
   $frases = array(
      1 => "Una lavadora",
      2 => "Un movil",
      3 => "Una muñeca",
      4 => "Un Pecho",
      5 => "Una caca",
      6 => "JOSEJUAN",
    );

   echo $frases[$numero];
}
?>

Querría añadir un estilo por ejemplo 1=> "<span class="uno">UNA</span>lavadora"

1
  • Te falta mucho código para poder reproducir tu problema, pero entiendo lo que te ocurre y lo que quieres hacer, así que ahí tienes mi respuesta. Commented el 6 feb. 2017 a las 13:12

1 respuesta 1

1

Imagino que lo que quieres es hacer lo siguiente:

if (isset($_GET['clickTimes'])) {
  $numero = $_GET['clickTimes'] + 1;
  $frases = [
    1 => [ 'clase' => 'clase1', 'texto' => "Una lavadora" ],
    2 => [ 'clase' => 'clase2', 'texto' => "Un móvil" ],
    3 => [ 'clase' => 'clase1', 'texto' => "Una muñeca" ],
    4 => [ 'clase' => 'clase2', 'texto' => "Un Pecho" ],
    5 => [ 'clase' => 'clase1', 'texto' => "Una caca" ],
    6 => [ 'clase' => 'clase3', 'texto' => "JOSEJUAN" ],
  ];
  /* Enumeración de todos los posibles */
  foreach ($frases as $indice => $datos) {
    echo '<span class="' . htmlspecialchars($datos['clase']) . '">' .
      htmlspecialchars("{$datos['texto']} ($indice)") .
      "</span>\n";
  }
  /* Impresión del elegido */
  if (isset($frases[$numero])) {
    echo '<span class="' . htmlspecialchars($frases[$numero]['clase']) . '">' .
      htmlspecialchars("{$frases[$numero]['texto']} ($numero)") .
      "</span>\n";
  } else {
    echo "No existe el índice para el número '$numero'";
  }
}

Simplemente definimos el texto y la clase como dos índices de cada elemento y con eso tienes hecho el trabajo.

Edito: Por cierto, al tener que recrear tu código para hacerlo funcionar, me di cuenta que deberías sustituir wordOutput.textContent = request.responseText por wordOutput.innerHTML = request.responseText para que el texto devuelto por el PHP se interprete como HTML y las etiquetas enviadas se mantengan en la página y no se conviertan en texto plano.

Para satisfacer el comentario de enviar textos con varias clases:

if (isset($_GET['clickTimes'])) {
  $numero = $_GET['clickTimes'] + 1;
  $frases = [
    1 => [ '<span class="clase1">Una lavadora</span>' ],
    2 => [ '<span class="clase1">Un</span> <span class="clase2">Móvil</span>' ],
    3 => [ '<span class="clase3">MINI</span> <span class="clase4">GOLF</span>' ]
  ];
  /* Impresión del elegido */
  if (isset($frases[$numero])) {
    echo $frases[$numero];
  } else {
    echo "No existe el índice para el número '$numero'";
  }
}
8
  • Esto es un boton que cuando pulso envia una palabra por JS al html. Asi que lo unico que quiero hacer es añadirle una clase a ese texto, para que pueda darle estilo por css ¿me explico?, he actualizado el codigo para que lo entiendas mejor. Commented el 6 feb. 2017 a las 13:33
  • Es una edición muy grande, esta noche le echo un vistazo (si no te han resuelto la duda) y edito mi respuesta, pero a primera vista parece que basta con agregarlo a <span id="wordOutput"></span> de modo que te quedaría así: <span id="wordOutput" class="clase_a_editar"></span>. Commented el 6 feb. 2017 a las 13:42
  • Es que me gustaria que tuvises dos clases o dos etiquetas: <p class="1">Una</p> <span class="2">lavadora</span> Commented el 6 feb. 2017 a las 13:49
  • Entonces mira bien mi ejemplo Commented el 6 feb. 2017 a las 14:13
  • Lo que dices de <span id="wordOutput"></span> de modo que te quedaría así: <span id="wordOutput" class="clase_a_editar"></span> no es lo que busco, por que lo que busco es que cuando muestre una palabra compuesta como MINI GOLF , pues el MINI tenga una clase y GOLF otra.... @OscarGarcia Commented el 7 feb. 2017 a las 18:58

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.