Ciclo for per Pulsante in JavaScript

Veronica_ · 29 Apr 2018

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.

Max 1 · 29 Apr 2018

@Veronica_
Da regolamento del forum, come tutti noi sei tenuto ad usare il tag

quando posti del codice, oppure la funzione codice dalla barra degli strumenti

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

Veronica_ · 29 Apr 2018

Scusa, mi era sfuggita questa parte

WmbertSea · 30 Apr 2018

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.

Veronica_ · 4 Mag 2018

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

WmbertSea · 4 Mag 2018

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.

Veronica_ · 5 Mag 2018

Ti ringrazio tantissimo per la tua disponibilità, adesso funziona tutto!

WmbertSea · 5 Mag 2018

Bene, figurati, buon proseguimento

Cerca

Cerca

Ciclo for per Pulsante in JavaScript

Veronica_

Nuovo Utente

Max 1

Super Moderatore

Veronica_

Nuovo Utente

WmbertSea

Moderatore

Veronica_

Nuovo Utente

WmbertSea

Moderatore

Veronica_

Nuovo Utente

WmbertSea

Moderatore

Discussioni simili