Show Java Script without click

Question

Show Java Script without click

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I have a code in which I show a content, every time I click on a button.

I want to modify the code so that only with a click shows all the separated content for a few seconds. What do I have to modify of the JS?

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');
    
    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++;
            }, 1000);
          }
        }
      };
      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 => "MINIPIMER",
      2 => "MINIBAR",
      3 => "MINIFALDA",
      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>

I get the content from a php file. I attach the code.

javascript php

asked by Antonio Ángel Estrada Pérez 06.02.2017 в 14:47

source

2 answers

How to use executorservice How to Represent a DataTable in an MVC View Without knowing the properties of the DataTable

score 2 · Answer 1

First remove the logic of the event and put it in a normal function.

function generateAndShowWord() {
  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++;
          }, 1000);
        }
      }
    };
    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');
  }
}

Now, in the click event of the button, you call the function and you generate an execution interval:

const WORDS_INTERVAL = 5; // por ejemplo, cada 5 segundos

btnRandomWord.addEventListener('click', function () {
  generateAndShowWord(); // llamas la primera ve<

  window.setInterval(function () {
    generateAndShowWord();
  }, WORDS_INTERVAL * 1000);
});

score 0 · Answer 2

you can try the following:

setInterval(function () {
document.getElementById("randomWordGen").click();
}, 2*1000);

it will run every 2 seconds, or you can use this:

setTimeout(function(){
document.getElementById("randomWordGen").click();
}, 2*1000);

and it will run every 2 seconds after the first click.