Ciclo for per Pulsante in JavaScript

Discussione in 'Javascript' iniziata da Veronica_, 29 Aprile 2018.

  1. Veronica_

    Veronica_ Nuovo Utente

    Registrato:
    29 Aprile 2018
    Messaggi:
    9
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Ciao a tutti, sono alle prime armi con HTML/Javascript e ho un problema con un pulsante.
    Il mio intento è quello di creare un pulsante che "scappa" quando l'utente ci avvicina il mouse, ma che dopo un tot di tempo si ferma e si lascia cliccare dall'utente. IL codice al momento è questo e per ora funziona:
    Codice:
    <!DOCTYPE html>
    <html>
        <head>
            <title>
                Pulsante che scappa!
            </title>
        </head>
        <div id="container" style="margin-top: 15%; margin-left: 25%; margin-right: 25%; margin-bottom: 20%;">
            <div id="header" style="background-color: white; margin-top: 30%;">
                <body bgcolor="#FFFFFF">
        <p align="center">
                        <input type="button" id="next" value="Continua" onmouseover="Scherzo()">
                    </p>
                </body>
    
            </div>
        </div>
        <script type="text/javascript">
            function Scherzo()  {     
                var next = document.getElementById("next");
                var x = Math.floor(Math.random() * 500);
                var y = Math.floor(Math.random() * 500);
                next.style.position = "absolute";
                next.style.top = x + "px";
                next.style.left = y + "px";
            }
    </script>
     
    </html>
    Adesso devo fare in modo che questo pulsante si fermi per essere cliccato e avevo intenzione di creare un ciclo for, che dopo aver decrementato il contatore nella funzione "Scherzo()" avrebbe avviato l'altra funzione per il click del pulsante. Come potrei fare? Ho già provato precedentemente, ma in qualsiasi modo modifichi la funzione il pulsante smette di funzionare e non dà più segni di vita.
     
    Ultima modifica di un moderatore: 29 Aprile 2018
  2. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.768
    Mi Piace Ricevuti:
    283
    Punteggio:
    83
    Sesso:
    Maschio
    @Veronica_
    Da regolamento del forum, come tutti noi sei tenuto ad usare il tag [​IMG] quando posti del codice, oppure la funzione codice dalla barra degli strumenti
    [​IMG]
    Inoltre ti prego di leggere attentamente il regolamento generale del forum e quello di sezione dove posti
    Grazie
    Per questa volta te lo sistemo io ma mi raccomando per il futuro
     
  3. Veronica_

    Veronica_ Nuovo Utente

    Registrato:
    29 Aprile 2018
    Messaggi:
    9
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Scusa, mi era sfuggita questa parte
     
  4. WmbertSea

    WmbertSea Utente Attivo

    Registrato:
    28 Novembre 2014
    Messaggi:
    146
    Mi Piace Ricevuti:
    20
    Punteggio:
    28
    Ciao, si può fare in vari modi. A mio parere non ti serve un ciclo for, ma piuttosto potresti usare una variabile globale che vai a decrementare e controllare all'inizio della funzione in modo da stabilire quando è finito lo scherzo e compiere delle altre azioni.

    Ad esempio, definisci questa variabile globale (nel livello base dentro il tag <script>, cioè fuori da qualsiasi altra funzione):
    Codice:
    var contatoreScherzo = 5;
    Il valore 5 (che ovviamente puoi modificare a tuo piacimento) è il numero di volte che avverrà lo scherzo quando passi col mouse sopra il pulsante.

    Dentro la funzione scherzo(), proprio all'inizio della funzione, metti una condizione del genere:
    Codice:
    if(--contatoreScherzo < 0){
       // Qui l'azione reale
       return;
    }
    Ogni volta che è richiamata questa funzione la variabile contatore viene decrementata (con l'operatoree --) e la condizione va a verificare se il suo valore corrente è inferiore a zero. In quel caso viene eseguito ciò che sta dentro la condizione; il return fa in modo che si esca istantaneamente dalla funzione e di fatto impedisce l'esecuzione del resto dello script in essa contenuto.

    Al posto di quel commento puoi inserire il reale script che vuoi eseguire; in questo caso potrebbe non esserci nulla dal momento che questa funzione è richiamata per onmouseover, ma magari puoi definire allo stesso modo un'ulteriore funzione per onclick, la quale potrà essere eseguita ovviamente una volta che il pulsante resta fermo.


    PS: controlla meglio il tuo codice HTML, contiene un po' di errori strutturali; tutti i contenuti dovrebbero stare dentro il tag <body> anche lo stesso <script>, e altri vari errori che potrebbero, tra l'altro, incidere sul corretto funzionamento della pagina. Ti consiglio di utilizzare un validatore (vedi questo) per controllare e correggere tutti gli eventuali errori in modo da ottenere un codice valido.
     
  5. Veronica_

    Veronica_ Nuovo Utente

    Registrato:
    29 Aprile 2018
    Messaggi:
    9
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Grazie mille, adesso il pulsante funziona e grazie anche per l'ulteriore suggerimento. Un'ultima cosa, quando allo scadere del tempo il pulsante si blocca, come faccio ad aprire una nuova pagina (già creata in precedenza) cliccando lo stesso bottone?
    avevo pensato ad una cosa del genere:

    Codice:
    <script type="text/javascript">
        var count = 5;
        function Scherzo(){  
            if(--count > 0){ //codice vecchio
                var joke = document.getElementById("joke");
                var x = Math.floor(Math.random() * 500);
                var y = Math.floor(Math.random() * 500);
                joke.style.position = "absolute";
                joke.style.top = x + "px";
                joke.style.left = y + "px";
                return;
            }
            else{ //codice nuovo
                var joke = document.getElementById("joke");
                joke.onclick = //link da aprire;
            }
            </script>
    Nel codice nuovo il problema è che non so come strutturare bene l' "onclick" e soprattutto non so se è possibile farlo in questo modo.
    Avevo anche provato a fare così:

    Codice:
    <input type="button" id="joke" value="Cliccami" onmouseover="Scherzo()" onclick="//link da aprire">
    
    Ma non funziona assolutamente nulla.

    Ps: grazie mille per la pazienza
     
  6. WmbertSea

    WmbertSea Utente Attivo

    Registrato:
    28 Novembre 2014
    Messaggi:
    146
    Mi Piace Ricevuti:
    20
    Punteggio:
    28
    Ciao, in questo caso non si tratta di un elemento <a> in cui normalmente puoi inserire il percorso URL nel relativo attributo href; ma puoi invece "forzare" l'apertura della nuova pagina via JavaScript attraverso la proprietà window.location.href.

    Come stavi facendo, puoi impostare tale proprietà nell'else definendo una funzione per l'onclick del button, con una cosa del genere:
    Codice:
    function Scherzo(){
       var joke = document.getElementById("joke"); // NOTA: questa variabile è meglio dichiararla una sola volta all'inizio della funzione
       if(--count > 0){ //codice vecchio
          var x = Math.floor(Math.random() * 500);
          var y = Math.floor(Math.random() * 500);
          joke.style.position = "absolute";
          joke.style.top = x + "px";
          joke.style.left = y + "px";
          return;
       }
       else{ //codice nuovo
          joke.onclick = function(){
             window.location.href = 'url_della_pagina_da_aprire';
          }
       }
    }
    Oppure, in modo simile puoi definire quella proprietà nell'onclick del tag stesso, sempre come stavi cercando di fare:
    Codice:
    <input type="button" id="joke" value="Cliccami" onmouseover="Scherzo()" onclick="window.location.href='url_della_pagina_da_aprire';">
    Occhio ad usare correttamente apici e doppi apici in questo caso.

    Fai sapere, buon proseguimento.
     
  7. Veronica_

    Veronica_ Nuovo Utente

    Registrato:
    29 Aprile 2018
    Messaggi:
    9
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Ti ringrazio tantissimo per la tua disponibilità, adesso funziona tutto!
     
  8. WmbertSea

    WmbertSea Utente Attivo

    Registrato:
    28 Novembre 2014
    Messaggi:
    146
    Mi Piace Ricevuti:
    20
    Punteggio:
    28
    Bene, figurati, buon proseguimento :)
     
Sto caricando...

Condividi questa Pagina