als if statement is true verander onclick value?

[chanckjh]

hallo,

ik ben pas begonnen met javascript, dus ik begrijp het nog niet helemaal.
ik heb bijvoorbeeld een plaatje en een knop.
Als er op het knop is gedrukt veranderd het plaatje en onclick value van het knop.

Dus:
Als het plaatje src="A.jpg" is
dan moet het onclick value van het knop veranderen in B.jpg
zodat als je op het knop drukt, veranderd het plaatje in B.jpg
en als het plaatje B.jpg is
dan moet het onclick value van het knop veranderen in C.jpg
enzovoort.

<img src="A" />
<a href="#" onclick="getElementsTagName('img').src = "B"> link </a>

<script>
if(document.getElementsByTagName('img').src = 'A')
{document.getElementsByTagName('a').setAttribute('onclick','B');
}

if(document.getElementsByTagName('img').src = 'B')
{document.getElementsByTagName('a').setAttribute('onclick','C');
}

</script>

Dit is wat ik tot nu toe heb, maar zoals je het vast al wel ziet doet ie het niet.
kan iemand mij helpen?

Groeten

 

[That Guy]

Twee dingen:

1. je moet op je quotes letten. Wat je in je a tag fout doet is dat je de onclick-property opent met dubbele quotes, maar daarin dat ook doet. Dan gaat 't fout.
2. een enkel gelijk-teken is assignen (toekennen); een dubbele is vergelijken. Dus:

[js]var x = 3; // maakt x gelijk aan 3
x == 3 // vergelijk x met 3[/js]

Also: je kan beter met ID's werken; getElementsByTagName returnt een array, omdat het meerdere waardes (elementen) kunnen zijn. Probeer zoiets:

<img src='a.jpg' id='plaatje' />

<a id='link'>link</a>



<script>

   var plaatje = document.getElementById('plaatje');
   var link    = document.getElementById('link');

   link.addEventListener('click', function()
   {
      switch(plaatje.getAttribute('src'))
      {
         case 'a.jpg':
            link.setAttribute('src', 'b.jpg');
            break;

         case 'b.jpg':
            link.setAttribute('src', 'c.jpg');
            break;
      }
   }, false);

</script>

 

[chanckjh]

Twee dingen:

1. je moet op je quotes letten. Wat je in je a tag fout doet is dat je de onclick-property opent met dubbele quotes, maar daarin dat ook doet. Dan gaat 't fout.
2. een enkel gelijk-teken is assignen (toekennen); een dubbele is vergelijken. Dus:

[js]var x = 3; // maakt x gelijk aan 3
x == 3 // vergelijk x met 3[/js]

Also: je kan beter met ID's werken; getElementsByTagName returnt een array, omdat het meerdere waardes (elementen) kunnen zijn. Probeer zoiets:

<img src='a.jpg' id='plaatje' />

<a id='link'>link</a>



<script>

   var plaatje = document.getElementById('plaatje');
   var link    = document.getElementById('link');

   link.addEventListener('click', function()
   {
      switch(plaatje.getAttribute('src'))
      {
         case 'a.jpg':
            link.setAttribute('src', 'b.jpg');
            break;

         case 'b.jpg':
            link.setAttribute('src', 'c.jpg');
            break;
      }
   }, false);

</script>

Heey,

Dankje wel!
er was wel een klein foutje. link.setAttribute moest plaatje.setAttribute zijn.
Ik had het ook bij html5 video gedaan en het werkte ook,
maar nu heb ik een andere probleempje.
voorbeeldje van html5 video tag is

<video src='video.mp4'>
</video>

Dit werkt dankzij jouw code. Het probleem is dat niet alle browsers bepaalde video ondersteunen. Er moet dan zulke codes zijn.

<video>
    <source src='video.mp4' />
    <source src='video.ogv' />
    <source src='video.webm' />
</video>

Ik heb dezelfde codes gedaan. De src veranderd wel, maar de video verandert/speelt de nieuwe filmpje niet, dat komt denk ik omdat de <video> niet geselecteerd is met onclick. Hoe kan ik dit aanpakken?

 

[That Guy]

Eh, ik volg je niet helemaal.


Wat wil je nou precies bereiken? Dat als mensen op een knop klikken je van video veranderd? In dat geval kan je denk ik beter een stukje javascript gebruiken en dan het video-element zelf vol te laden met source elementen.

Als het probleem is dat je de nieuwe sources wel vol stopt maar het niet gelijk begint te spelen, kan het zijn dat je het moet forceren met een .play() oid.



:thumb:

 

[chanckjh]

Eh, ik volg je niet helemaal.


Wat wil je nou precies bereiken? Dat als mensen op een knop klikken je van video veranderd? In dat geval kan je denk ik beter een stukje javascript gebruiken en dan het video-element zelf vol te laden met source elementen.

Als het probleem is dat je de nieuwe sources wel vol stopt maar het niet gelijk begint te spelen, kan het zijn dat je het moet forceren met een .play() oid.



:thumb:

Wat ik wil bereiken is dat als mensen op het knopje drukt filmpje A afspeelt en als ze weer erop drukken filmpje B afspeelt enzovoort. Jouw code werkt bij dit

<video src='A.mp4'>
</video>

Als er op het knopje is gedrukt speelt filmpje B.mp4 en daarna weer op de knop gedrukt speelt C.mp4 enzovoort. Maar het werkt niet bij

<video>
   <source src='A.mp4' />
   <source src='A.ogg' />
   <source src='A.webm />
</video>

Als ik op het knopje drukt dan moet filmpje B meteen afspelen, maar dat gebeurd niet. Het <source src='A' /> veranderd wel in <source src='B' />, maar het speelt niet af. Als ik er weer opdrukt dan veranderd B in C.

Weet je misschien hoe ik dit kan aanpakken?

(html5 video info:
Bepaalde browsers pakt 1 van de videobestanden. bijvoorbeeld: Firefox pakt geen mp4 dus dat slaat het over en pakt dan ogg.)

 

[That Guy]

Heya,


(ik weet hoe het video element werkt, dus extra uitleg is niet nodig )

Denk dat het handigste is, zoals hiervoor al gezegd, een soort van 'virtuele' playlist te bouwen. Zoiets:

<video id='geval'></video>

<button id='knopje'>klikmeh</button>

[js]var video = document.getElementById('video'),
knopje = document.getElementById('knopje');

var spul =
[
['a.mp4', 'a.ogg', 'a.webm'],
['b.mp4', 'b.ogg', 'b.webm']
];

var huidig = 1;

function gooiVol(num)
{
var i,
len = spul[num].length;

video.removeChildNodes(); // ?

for(i = 0; i < len; i++)
{
elem = document.createElement('source');
elem.setAttribute('src', spul[num]);

video.addChildNode(elem); // ?
}

// evt. iets van video.play() ofzo.
}

gooiVol(0); // zet het 1e klaar

knopje.addEventListener('click', function()
{
gooiVol(huidig);
huidig++;
}, false);[/js]



:thumb: