Script che riproduce il marquee

**PrecisionMaster** · 24-01-2015, 18:35

Salve a tutti, ho appena intrapreso il js sia qui su html.it che su w3schools.
Ho provato a fare qualcosa di molto semplice ma mi dice:
"Uncaught TypeError: Undefined is not a function".
P.s. i<20 è totalmente casuale, volevo soltanto provare come funziona.
Ho provato anche a chiudere con else ma non funziona lo stesso.
Il codice è il seguente:

codice:

<!doctype html><html>
<head>
<meta charset="UTF-8">
<title>Una prova JS</title>
<style>
#text
{
 width:200px;
 position:absolute;
 left:20px;
 transition:all 1s ease;
}
</style>
</head>
<body>


<p id="text">Testo di prova
</p>


<script type="text/javascript">
var i;


for(i=0; i<20; i++)
{
  if(document.GetElementById("text").style.left == "20px" )
   {
      document.GetElementById("text").style.left = "600px";
   }
  else if(document.GetElementById("text").style.left == "600px" )
   {
      document.GetElementById("text").style.left = "20px";
   }
}
</script>
</body>
</html>

**tampertools** · 24-01-2015, 18:57

GetElementById -> getElementById (con la minuscola)

Comunque la prossima volta che posti un errore, di' anche la riga dove si presenta

**PrecisionMaster** · 24-01-2015, 19:53

è vero! Grazie ora la sintassi è corretta.
Però non funziona lo stesso!
Possibile che sia sbagliato qualcosa a livello "logico"?
Appena aggiorno la pagina trovo subito il testo a 600px di distanza.
Ho aggiunto anche -webkit- nel css ma non funziona lo stesso.

**tampertools** · 25-01-2015, 01:04

Di fatto quel codice sposta 20 volte avanti e indietro l'elemento, ma talmente veloce che il browser ti mostra solo l'ultima posizione. Tu cosa vuoi ottenere?

**PrecisionMaster** · 25-01-2015, 01:13

Originariamente inviata da tampertools

Di fatto quel codice sposta 20 volte avanti e indietro l'elemento, ma talmente veloce che il browser ti mostra solo l'ultima posizione. Tu cosa vuoi ottenere?

Anche io ci ho pensato. Ma non può essere!
Ho messo nel CSS transition: all 1s ease, quindi dovrei vedere benissimo lo spostamento, no?
Voglio ottenere un testo che va avanti e indietro(so che è possibile con i keyframe del css3 ma voglio capire anche con js).
Possibile che non entra nel campo if?
Ho provato anche a cancellare l'else if e il risultato è lo stesso. Adesso rimane a 20px perchè prima c'era un errore e lo portava a 600. Adesso non parte neanche.

codice:

<script type="text/javascript">
var i;

for(i=0; i<20; i++)
{
    if(document.getElementById("text").style.left == "20px")
    {
        document.getElementById("text").style.left = "600px";
    }
    else if(document.getElementById("text").style.left == "600px")
    {
        document.getElementById("text").style.left = "20px";
    }
}
</script>

Il codice html/css è uguale, anzi ho aggiunto -webkit-transition:all 1s ease;

**cavicchiandrea** · 25-01-2015, 11:15

@Precision prendi uno script "marquee" pronto quando non si hanno conoscenze approfondite di javascript (che il progetto richiede) si dicono un sacco di "sciocchezze", e sperare che il forum ti possa insegnare il javascript è arduo (chiaramente è un pensiero personale maturato sul l'esperienza di 13 anni di forum)

**PrecisionMaster** · 25-01-2015, 11:44

Originariamente inviata da cavicchiandrea

@Precision prendi uno script "marquee" pronto quando non si hanno conoscenze approfondite di javascript (che il progetto richiede) si dicono un sacco di "sciocchezze", e sperare che il forum ti possa insegnare il javascript è arduo (chiaramente è un pensiero personale maturato sul l'esperienza di 13 anni di forum)

Non pensavo fosse così difficile.
A questo punto parto da qualcosa di più semplice e riprendo dopo.
Non capisco però perchè il mio codice non funziona. Non chiedo mica di spiegarmi il js, chiedo solo perchè il mio codice non funziona, solo la motivazione.
Grazie!

**tampertools** · 25-01-2015, 13:51

Perché JS non aspetta che l'animazione CSS sia finita.

Prova a sostituire il for con

codice:

setInterval(function () {
   // tutto il contenuto del for
}, 1000);

**PrecisionMaster** · 25-01-2015, 14:21

Ho fatto come hai detto: non funziona.

codice:

<!doctype html><html>
<head>
<meta charset="UTF-8">
<title>Una prova JS</title>
<style>
#text
{
 width:200px;
 position:absolute;
 left:20px;
 transition:all 1s ease;
 -webkit-transition:all 1s ease;
}
</style>
</head>
<body>


<p id="text" onClick="myfunction()" >Testo di prova
</p>


<script type="text/javascript">
function myfunction()
{
  setInterval(function() {
	
   if(document.getElementById("text").style.left == "20px")
	{
		document.getElementById("text").style.left = "600px";
	}
	else if(document.getElementById("text").style.left == "600px")
	{
		document.getElementById("text").style.left = "20px";
	}
  }, 1000);	
}


</script>
</body>
</html>

**cavicchiandrea** · 25-01-2015, 14:30

esempio di come poi rilevare gli attributi css http://webandylab.altervista.org/styleleftcss.html style.left non viene rilevato da js perché è impostato da css

Discussione: Script che riproduce il marquee

Strumenti discussione

Ricerca discussione

Visualizza

Script che riproduce il marquee

Permessi di invio