Ciclo for per Pulsante in JavaScript

Veronica_

Nuovo Utente
29 Apr 2018
9
0
1
24
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:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
@Veronica_
Da regolamento del forum, come tutti noi sei tenuto ad usare il tag
code-gif.5260
quando posti del codice, oppure la funzione codice dalla barra degli strumenti
box-inserisci-2-png-jpg.5261

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
 

WmbertSea

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
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.
 

Veronica_

Nuovo Utente
29 Apr 2018
9
0
1
24
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

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
G Ciclo if php per far comparire un pulsante solo nel caso in cui una variabile sia 0 PHP 2
T con oop creare un ciclo per una pagina dinamica html con php PHP 3
G [PHP] totale per ogni id di un ciclo PHP 1
A [PHP] metodo di una classe per estrarre i dati con ciclo while PHP 1
H [PHP] Ciclo per calcolare i chilometri PHP 4
M Problema con ciclo foreach per chiusura apertura div in base al numero di record in database PHP 1
B ciclo in PHP per creare numero progressivo PHP 2
A Ciclo per generare etichette PHP 0
L gestire array per radio-checkbox in ciclo while PHP 2
G Help!!! ciclo submit automatico per ogni record mysql PHP 15
B ciclo con array, assegnare una classe differente per ciascun risultato PHP 3
M problema con ciclo foreach per estrarre dati da un database PHP 22
asevenx ciclo for per un incremento maggiore di 1 PHP 1
I Inviare E-mail con un ciclo per tabella PHP 3
A Ciclo ASP per leggere XML Classic ASP 7
minatore Ciclo for per avere chek ceccate e non PHP 8
A ciclo while per aggiungere email estratte dalla tab1 alla tab2 di un db PHP 4
E creare ciclo per campo text PHP 1
D Ciclo per passare valori checkbox da popup a finestra madre Javascript 2
B Completare il seguente ciclo affinché stampi tutto l’array al contrario PHP 3
W MySQL ciclo in SELECT MySQL 0
E Inviare variabile a PHP da ciclo in JS Javascript 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
W fare la somma di un valore estratto da un ciclo while Classic ASP 0
motleyrulez Aiuto con un ciclo PHP 0
B [PHP] formula e ciclo PHP 5
M [PHP] Come inserire codice html in un ciclo while PHP 2
P Incrementare nodo in ciclo for-each XML 6
S [PHP] Ciclo foreach su più array PHP 2
M UPDATE non aggiorna db se lo inserisco in un ciclo Database 1
N [PHP] Controllare condizione ciclo While PHP 9
maxnegri [PHP] Eliminare risultati duplicati da ciclo foreach ottenuti da una select php mysqli PHP 18
N [PHP] Registrare variabili all'interno di un ciclo PHP 3
MattiaBL [PHP] Problema ciclo while PHP 3
elpirata [PHP][RISOLTO] Sommare gli importi estratti da un ciclo while PHP 3
C [PHP] Ciclo for dinamico PHP 14
gandalf1959 [PHP] query all'interno di un ciclo while PHP 3
Z [PHP] ciclo for PHP 9
valvasori [PHP] Problema ciclo for PHP 12
S [PHP] Recupero più dati da form realizzata ciclo FOR PHP 5
gandalf1959 [PHP] ciclo while non scrive dove dovrebbe... PHP 2
Monital [PHP] ciclo su un file json molto grande PHP 1
M [PHP] Errore in ciclo foreach PHP 1
O Ciclo non visualizzato PHP 1
M problema ciclo javascript Javascript 4
F Problema codice in un ciclo while PHP 2
T ciclo $.each non va jQuery 4
V Generare array da ciclo while e prendere valori casuali PHP 4
I tabella con ciclo, recupero dati PHP 3
Monital Problema con un ciclo for. PHP 1

Discussioni simili