[html/javascript] Problema con codice javascript

cos1950 · 19-05-2016, 10:30

Sto testando un frammento di codice html/javascript che dovrebbe consentire la scelta del filmato (ogg o altro) da vedere in una finestra... ho messo insieme un po' di codice, ma non fa la cosa giusta perchè dopo il primo clic, ai successivi clic fa vedere sempre lo stesso filmato. Ecco il codice usato

<html>
<head>
<script type="text/javascript">
var video;
function play_video(video_url)
{
video = document.getElementById('video');var source = document.createElement('source');
source.setAttribute('src', video_url);
video.appendChild(source);video.load();
video.play();
return 0;
}
</script>
</head>
<body>

<table><td><video id="video" poster="img_dam/dam070.jpg" controls style="position: absolute; top: 10px; left: 200px;
width:350px; height:auto; border: 4px solid green;
border-radius: 10px; box-shadow: 6px 6px 6px gray"/>
</video> </td><td>
<br>
<ul>
<li> <a href="javascript:void(0);" onclick="play_video('video/29Maggio2006.ogv')"> video Caprera </a>
<li> <a href="javascript:void(0);" onclick="play_video('video/DaMariaGraziaPerDamiano.ogv')"> video Maria Grazia </a>

</ul>
</table>
</body>
</html>

Non riesco a capire come fare per eliminar l'inconveniente

OoZic · 19-05-2016, 12:13

Ciao,

qualche consiglio:
- metti sempre il codice all'interno del [ CODE ] cosi da esssere formattato

Codice:

<html>
<head>
<script type="text/javascript">
var video;
function play_video(video_url)
{
video = document.getElementById('video');var source = document.createElement('source');
source.setAttribute('src', video_url);
video.appendChild(source);video.load();
video.play();
return 0;
}
</script>
</head>
<body>

<table><td><video id="video" poster="img_dam/dam070.jpg" controls style="position: absolute; top: 10px; left: 200px;
width:350px; height:auto; border: 4px solid green;
border-radius: 10px; box-shadow: 6px 6px 6px gray"/>
</video> </td><td>
<br>
<ul>
<li> <a href="javascript:void(0);" onclick="play_video('video/29Maggio2006.ogv')"> video Caprera </a>
<li> <a href="javascript:void(0);" onclick="play_video('video/DaMariaGraziaPerDamiano.ogv')"> video Maria Grazia </a>

</ul>
</table>
</body>
</html>

- usa qualche tool online tipo JSFIDDLE o JSBIN per poter avere un anteprima e rendere piu' semplice per chi ti deve aiutare a trovare i problemi

Qui c'e' la soluzione commentata usando jQuery che mi ha semplificato la vita
https://jsfiddle.net/pvvsm4xe/

Come esercizio potresti provare a rifarla usando vanilla JS come stavi facendo

Ciao

cos1950 · 19-05-2016, 13:44

Quote:

Originariamente inviato da OoZic

Ciao,

qualche consiglio:
- metti sempre il codice all'interno del [ CODE ] cosi da esssere formattato

Codice:

<html>
<head>
<script type="text/javascript">
var video;
function play_video(video_url)
{
video = document.getElementById('video');var source = document.createElement('source');
source.setAttribute('src', video_url);
video.appendChild(source);video.load();
video.play();
return 0;
}
</script>
</head>
<body>

<table><td><video id="video" poster="img_dam/dam070.jpg" controls style="position: absolute; top: 10px; left: 200px;
width:350px; height:auto; border: 4px solid green;
border-radius: 10px; box-shadow: 6px 6px 6px gray"/>
</video> </td><td>
<br>
<ul>
<li> <a href="javascript:void(0);" onclick="play_video('video/29Maggio2006.ogv')"> video Caprera </a>
<li> <a href="javascript:void(0);" onclick="play_video('video/DaMariaGraziaPerDamiano.ogv')"> video Maria Grazia </a>

</ul>
</table>
</body>
</html>

- usa qualche tool online tipo JSFIDDLE o JSBIN per poter avere un anteprima e rendere piu' semplice per chi ti deve aiutare a trovare i problemi

Qui c'e' la soluzione commentata usando jQuery che mi ha semplificato la vita
https://jsfiddle.net/pvvsm4xe/

Come esercizio potresti provare a rifarla usando vanilla JS come stavi facendo

Ciao

Ciao... ehm, non ho capito molto...
La parte di jQuery va in uno script da mettere nello head?
il codice va utilizzato così com'è? Bisogna caricare qualche libreria jQuery?
La parte di html in JSFiddle è monca... in ogni caso il codice con me non funziona, probabilmente perchè faccio cavolate nei miei arrangiamenti... poi come data-video-url va bene un percorso (path) sul pc? Non mi funziona neanche l'esempio su JSFiddle...

OoZic · 19-05-2016, 13:57

Che browser usi? Jsfiddle su chrome mi funziona.

Jquery puoi caricarlo alla fine della tua pagina prima della chiusura del body e prima del tuo script. Il percorso non va bene a meno che non ci sia un web server che serve quella risorsa.

Sent from my iPhone using Tapatalk

cos1950 · 19-05-2016, 14:11

Quote:

Originariamente inviato da OoZic

Che browser usi? Jsfiddle su chrome mi funziona.

Jquery puoi caricarlo alla fine della tua pagina prima della chiusura del body e prima del tuo script. Il percorso non va bene a meno che non ci sia un web server che serve quella risorsa.

Sent from my iPhone using Tapatalk

Oh yes... uso firefox e mp4 non è nativo, ma ci vorrebbe ogg. Ho provato con chrome e funge

cos1950 · 20-05-2016, 09:41

Altro problema

Codice:

<p><table>
   <td><img src="images/marge_comment.png" id="mc" style="display:none"></td>
<td> 

<img src=images/commenti.png usemap="#commenti"> 
    <map name="commenti"> 
        <area shape="rect" coords="0,0,68, 12" 
                  href="javascript:void(0);" onclick="
                             if(document.getElementById('mc').style.display == none) document.getElementById('mc').style.display=yes;
                             else  document.getElementById('mc').style.display=none">
       </area></map>
</table></p><br>

immagine cliccabile, mediante tag <area> che dovrebbe settare visibilità di altra immagine adiacente.

Non funziona. Dove sbaglio?

OoZic · 21-05-2016, 09:55

non ti conviene usare onclick="" sull'element specialmente se hai un po di cose da fare.

metti tutto in uno script separato o infondo alla pagina e fatti aiutare da jQuery

cos1950 · 21-05-2016, 11:24

Quote:

Originariamente inviato da OoZic

non ti conviene usare onclick="" sull'element specialmente se hai un po di cose da fare.

metti tutto in uno script separato o infondo alla pagina e fatti aiutare da jQuery

E' che jQuery lo mastico davvero molto male, ancora... mi puoi suggerire un buon manuale in italiano? Io insegno e constato purtroppo che quelli che scrivono manuali in genere non sanno cosa significhi costruire un percorso didattico esaustivo e chiaro, partendo inconsapevolmente dalle loro conoscenze acquisite date per scontate...
mi potresti abbozzare una soluzione?

i progressi da me fatti nella costruzione del sito a cui tutto questo lavorio è destinato:

http://www.mariafrancescapes.it/Dami...ver/first.html

Damiano era mio figlio

OoZic · 21-05-2016, 11:50

mi spiace ...

Ti potrei consigliare di provare questo percorso, in 3 ore sono sicuro capirai un po meglio.
https://www.codecademy.com/learn/jquery

Se trovi dei concetti che non ti sono chiari allora probabilmente vorrai ripassare javascript

Riguardo il tuo codice l'errore potrebbe essere qui:

Codice:

document.getElementById('mc').style.display=yes

= yes non esiste, se vuoi dare un valore boolean deve essere 1/0 o true/false.

In questo caso quella proprieta' style.display deve ricevere una stringa, quindi tra "" virgolette

e i valori che puoi assegnargli sono quelli che potresti dare con CSS
https://developer.mozilla.org/en-US/...eb/CSS/display

cos1950 · 21-05-2016, 18:51

Quote:

Originariamente inviato da OoZic

mi spiace ...

Ti potrei consigliare di provare questo percorso, in 3 ore sono sicuro capirai un po meglio.
https://www.codecademy.com/learn/jquery

Se trovi dei concetti che non ti sono chiari allora probabilmente vorrai ripassare javascript

Riguardo il tuo codice l'errore potrebbe essere qui:

Codice:

document.getElementById('mc').style.display=yes

= yes non esiste, se vuoi dare un valore boolean deve essere 1/0 o true/false.

In questo caso quella proprieta' style.display deve ricevere una stringa, quindi tra "" virgolette

e i valori che puoi assegnargli sono quelli che potresti dare con CSS
https://developer.mozilla.org/en-US/...eb/CSS/display

Ho provato sia con il codice su href con onclick che in una function separata in uno script in fondo al body...
Alla fine ne sono venuto a capo mettendo alla proprietà display (dell'element) 'inline' al posto di 'yes' o 'visible'... come in questo frammento di codice

http://forum.it.altervista.org/javas...t-display.html

e così ha funzionato...

OoZic · 22-05-2016, 00:35

Ti consiglio vivamente di farti la traccia web su codecademy che comprende html+css+js e poi jQuery.

Altrimenti va a finire che ci perdi un sacco di tempo proprio xke ti mancano delle basi importanti del web, ad esempio il non sapere le diverse proprieta' "display" che puoi assegnare ad un elemento (inline, inline-block, block, table, flex, none, etc...)

cos1950 · 22-05-2016, 12:21

questo frammento di codice, in cui ho fatto ricorso a jQuery, dovrebbe fa scomparire l'elemento <object> che è un player swf, utilizzando il metodo FadeOut(0)

Codice:

<object id="player" style="classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="suona" >

		<param name="movie" value="mm/player.swf"> 
		<param name="allowfullscreen" value="true"> 
		<param name="allowscriptaccess" value="always"> 
		<embed type="application/x-shockwave-flash"
			id="player2"
			name="player2"
			src="player.swf" 
			width="420" 
			height="340"
			allowscriptaccess="always" 
			allowfullscreen="true"
                        backcolor="red"
			flashvars="file=playlist.xml&image=dam042.jpg"> 
	</object>


<input type="button"  id="bottone" value="Fade out"  href="javascript:void(0)"> 
</input>

<script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>


<script type="text/javascript">

   $("#bottone").click(function() 
   {
          $(‘#player’).fadeOut(0);
   });                                                           
</script>

In realtà non fa niente...

OoZic · 23-05-2016, 10:06

Quel codice e' pienissimo di errori

Ci sono virgolette aperte e non chiuse.
La versione di jQuery che stai usando e' vecchissima, usa la 2.x
http://jquery.com/download/

Stai usando un editor che ti possa dare delle dritte?

Altrimenti semplicemente facendo copia&incolla del tuo codice su jsbin ti rendi conto degli errori (tutto quello che e' rosso)

cos1950 · 23-05-2016, 13:39

Jsbin è favoloso... in 4 e 4 otto ho trovato tutti i bug... adesso funge

OoZic · 23-05-2016, 18:08

ti consiglio di usare un editor moderno tipo https://atom.io/

e aggiungi qualche plugin utile tipo
https://atom.io/packages/linter
https://atom.io/packages/linter-htmlhint
https://atom.io/packages/linter-jshint o il piu' moderno https://atom.io/packages/linter-eslint
e magari
https://atom.io/packages/atom-beautify

con questo dovresti evitare tutti quegli errori che un linter ti segnala prontamente

ciao

19-05-2016, 10:30	#1
cos1950 Senior Member Iscritto dal: Nov 2000 Città: prov. Olbia-Tempio; Trattative concluse: ne ho perso da tempo il conto Messaggi: 6890	[html/javascript] Problema con codice javascript Sto testando un frammento di codice html/javascript che dovrebbe consentire la scelta del filmato (ogg o altro) da vedere in una finestra... ho messo insieme un po' di codice, ma non fa la cosa giusta perchè dopo il primo clic, ai successivi clic fa vedere sempre lo stesso filmato. Ecco il codice usato <html> <head> <script type="text/javascript"> var video; function play_video(video_url) { video = document.getElementById('video');var source = document.createElement('source'); source.setAttribute('src', video_url); video.appendChild(source);video.load(); video.play(); return 0; } </script> </head> <body> <table><td><video id="video" poster="img_dam/dam070.jpg" controls style="position: absolute; top: 10px; left: 200px; width:350px; height:auto; border: 4px solid green; border-radius: 10px; box-shadow: 6px 6px 6px gray"/> </video> </td><td> <br> <ul> <li> <a href="javascript:void(0);" onclick="play_video('video/29Maggio2006.ogv')"> video Caprera </a> <li> <a href="javascript:void(0);" onclick="play_video('video/DaMariaGraziaPerDamiano.ogv')"> video Maria Grazia </a> </ul> </table> </body> </html> Non riesco a capire come fare per eliminar l'inconveniente __________________ Visitate il mio sito http://qui.nonsolochimica.com/index.htm

19-05-2016, 13:57	#4
OoZic Senior Member Iscritto dal: Nov 2010 Città: Londra Messaggi: 620	Che browser usi? Jsfiddle su chrome mi funziona. Jquery puoi caricarlo alla fine della tua pagina prima della chiusura del body e prima del tuo script. Il percorso non va bene a meno che non ci sia un web server che serve quella risorsa. Sent from my iPhone using Tapatalk __________________ > This is me < *When you gaze long into an abyss the abyss also gazes into you.*

21-05-2016, 09:55	#7
OoZic Senior Member Iscritto dal: Nov 2010 Città: Londra Messaggi: 620	non ti conviene usare onclick="" sull'element specialmente se hai un po di cose da fare. metti tutto in uno script separato o infondo alla pagina e fatti aiutare da jQuery __________________ > This is me < *When you gaze long into an abyss the abyss also gazes into you.*

21-05-2016, 11:50	#9
OoZic Senior Member Iscritto dal: Nov 2010 Città: Londra Messaggi: 620	mi spiace ... Ti potrei consigliare di provare questo percorso, in 3 ore sono sicuro capirai un po meglio. https://www.codecademy.com/learn/jquery Se trovi dei concetti che non ti sono chiari allora probabilmente vorrai ripassare javascript Riguardo il tuo codice l'errore potrebbe essere qui: Codice: document.getElementById('mc').style.display=yes = yes non esiste, se vuoi dare un valore boolean deve essere 1/0 o true/false. In questo caso quella proprieta' style.display deve ricevere una stringa, quindi tra "" virgolette e i valori che puoi assegnargli sono quelli che potresti dare con CSS https://developer.mozilla.org/en-US/...eb/CSS/display __________________ > This is me < *When you gaze long into an abyss the abyss also gazes into you.*

22-05-2016, 00:35	#11
OoZic Senior Member Iscritto dal: Nov 2010 Città: Londra Messaggi: 620	Ti consiglio vivamente di farti la traccia web su codecademy che comprende html+css+js e poi jQuery. Altrimenti va a finire che ci perdi un sacco di tempo proprio xke ti mancano delle basi importanti del web, ad esempio il non sapere le diverse proprieta' "display" che puoi assegnare ad un elemento (inline, inline-block, block, table, flex, none, etc...) __________________ > This is me < *When you gaze long into an abyss the abyss also gazes into you.*

23-05-2016, 10:06	#13
OoZic Senior Member Iscritto dal: Nov 2010 Città: Londra Messaggi: 620	Quel codice e' pienissimo di errori Ci sono virgolette aperte e non chiuse. La versione di jQuery che stai usando e' vecchissima, usa la 2.x http://jquery.com/download/ Stai usando un editor che ti possa dare delle dritte? Altrimenti semplicemente facendo copia&incolla del tuo codice su jsbin ti rendi conto degli errori (tutto quello che e' rosso) __________________ > This is me < *When you gaze long into an abyss the abyss also gazes into you.*

23-05-2016, 13:39	#14
cos1950 Senior Member Iscritto dal: Nov 2000 Città: prov. Olbia-Tempio; Trattative concluse: ne ho perso da tempo il conto Messaggi: 6890	Jsbin è favoloso... in 4 e 4 otto ho trovato tutti i bug... adesso funge __________________ Visitate il mio sito http://qui.nonsolochimica.com/index.htm

23-05-2016, 18:08	#15
OoZic Senior Member Iscritto dal: Nov 2010 Città: Londra Messaggi: 620	ti consiglio di usare un editor moderno tipo https://atom.io/ e aggiungi qualche plugin utile tipo https://atom.io/packages/linter https://atom.io/packages/linter-htmlhint https://atom.io/packages/linter-jshint o il piu' moderno https://atom.io/packages/linter-eslint e magari https://atom.io/packages/atom-beautify con questo dovresti evitare tutti quegli errori che un linter ti segnala prontamente ciao __________________ > This is me < *When you gaze long into an abyss the abyss also gazes into you.*

Strumenti
Mostra una versione stampabile Invia questa pagina per email