[JS] Onclick op image verandert niks*

[PainkillA]

Ik zie het gewoon niet meer wat er fout is. De afbeeldingen krijgen de volgende a href eigenschap mee:

echo '<a href= javascript:onclick=document.getElementById("mainImage").src='.$rip.'"; />';

De echo is omdat alle afbeeldingen in een tabel worden geplaatst en er nog een IF statement voor zit wat verder eigelijk niet van belang is.
de waarde van $rip is een pathnaam naar een plaatje. Daarmee wil ik een img die in een DIV staat veranderen van afbeelding. Maar er gebeurt gewoon niets. Plaatje heeft als ID en naam "mainImage".

[ Voor 27% gewijzigd door PainkillA op 23-10-2007 16:29 ]

[disjfa]

1. Html output hier neerzetten. Dan kunnen we kijken.
2. Maar daarvoor even leren wat een linkje is.

[Peter_B]

De inhoud van je href= moet tussen dubbele quotes staan. en de quotes die je wil echo-en moet je escappen: \" dus.

tip: http://handleidinghtml.nl en http://php.net

Extra tip voor als je FireFox gebruikt: de Firebug plugin, deze wijst je heel netjes op fouten in javascript

[ Voor 22% gewijzigd door Peter_B op 23-10-2007 16:55 ]

[BtM909]

Als je het hebt over Javascript, dan heb je het automatisch over client-side. Snap dan niet waarom je PHP code post?


Daarnaast is het handiger om een beschrijvendere topictitel te verzinnen. Iedereen heeft wel een fout in javascript

[Verwijderd]

Je hebt in de href attribute de onclick gedefenieerd. Dat klopt niet.

[t-x-m]

PHP:

<?php
print '<a href="#" onclick="document.getElementById(\'mainImag\').src=\''.$rip.'\'; return(false); ">';
   print 'Link';
print '</a>';
?>

???

[ Voor 17% gewijzigd door t-x-m op 24-10-2007 08:36 ]

[CH4OS]

t-x-m schreef op woensdag 24 oktober 2007 @ 08:34:

PHP:

<?php
print '<a href="#" onclick="document.getElementById(\'mainImag\').src=\''.$rip.'\'; return(false); ">';
   print 'Link';
print '</a>';
?>

???

Een href="#" is helemaal dirty vind ik... Je verwijst namelijk niet naar een anchor binnen je document.

Doe dan gewoon het volgende:

PHP:

echo '<a href="javascript:document.getElementById("mainImage").src="'. $rip .'" alt="'. $alt .'" />';

Of een JS functie schrijven en die aanroepen kan natuurlijk ook...

Dan vertel de gebruiker in ieder geval of ie de link aan kan klikken of niet (text-based browser of JS uit)

[ Voor 38% gewijzigd door CH4OS op 24-10-2007 08:42 ]

[.Gertjan.]

Verwijderd schreef op dinsdag 23 oktober 2007 @ 23:51:
Je hebt in de href attribute de onclick gedefenieerd. Dat klopt niet.

Nu moet hij volgens mij 2x klikken, want na de eerste keer klikken hangt er pas een event aan. Als hij

code:

javascript:onclick=document.

aanpast naar:

code:

javascript:document.

zou het al moeten werken (uiteraard wel eerst de escaping in de rest van de code fixen).

Maar het is netter om de click af te handelen in het onclick attribuut, dit zodat je de link (href) kan gebruiken voor een "statische" pagina (zodat mensen de link in een nieuw venster kunnen openen), dat zal hier misschien niet nodig zijn, maar wel handig om aan te leren

[ Voor 4% gewijzigd door .Gertjan. op 24-10-2007 08:46 ]

[CH4OS]

.Gertjan. schreef op woensdag 24 oktober 2007 @ 08:45:
Maar het is netter om de click af te handelen in het onclick attribuut, dit zodat je de link (href) kan gebruiken voor een "statische" pagina (zodat mensen de link in een nieuw venster kunnen openen), dat zal hier misschien niet nodig zijn, maar wel handig om aan te leren

En hoe wil je dan voorkomen dat de browser de link opent?

[.Gertjan.]

GJ-tje schreef op woensdag 24 oktober 2007 @ 08:50:
[...]
En hoe wil je dan voorkomen dat de browser de link opent?

In je onclick de code:

code:

return false;

opnemen.

Dan zal hij stoppen met het uitvoeren van het event zover ik weet. Redirecten naar # is ook vervelend als je deze bijvoorbeeld binnen een AJAX applicatie gebruikt als "history" of als je daadwerkelijk gebruik maakt van anchor tags.

Ik geloof ook dat als je base tag naar bijvoorbeeld de root van je applicatie wijst je bij het gebruik van # naar /[root]/# gaat.

[RobIII]

GJ-tje schreef op woensdag 24 oktober 2007 @ 08:40:
[...]

Een href="#" is helemaal dirty vind ik... Je verwijst namelijk niet naar een anchor binnen je document.

Doe dan gewoon het volgende:

PHP:

echo '<a href="javascript:document.getElementById("mainImage").src="'. $rip .'" alt="'. $alt .'" />';

Dus een href="#" is dirty en een javascript-pseudoprotocol gebruiken i.p.v. de daarvoor bedoelde onXxxx events niet?

[ Voor 24% gewijzigd door RobIII op 24-10-2007 10:11 ]

[CH4OS]

.Gertjan. schreef op woensdag 24 oktober 2007 @ 09:03:
In je onclick de code:

code:

return false;

opnemen.

Dan zal hij stoppen met het uitvoeren van het event zover ik weet. Redirecten naar # is ook vervelend als je deze bijvoorbeeld binnen een AJAX applicatie gebruikt als "history" of als je daadwerkelijk gebruik maakt van anchor tags.

Ik geloof ook dat als je base tag naar bijvoorbeeld de root van je applicatie wijst je bij het gebruik van # naar /[root]/# gaat.

Als je return false; in je onclick zet, dan stopt ie toch de onclick event en niet het openen van de URL in de browser? Tenminste, ik zou het wel ontzettend scheef vinden...

[Verwijderd]

De ideale oplossing is:

PHP:

echo '<a href="' . $rip . '" onclick="document.getElementById(\'mainImage\').src=\'' . $rip . '\';return false;">link naar prent</a>';

Zo zal de browser linken naar de prent indien js disabled is ofwel de image in de div plaatsen indien js enabled is.

quote: http://www.alistapart.com/articles/behavioralseparation

Everything is superficially intertwingled

Suppose you want to add some behavior to a particular link. You could use what’s known as the javascript: pseudo-protocol:

<a href="javascript: doSomething();">click for fun</a>

That’s a short-sighted approach. User agents that don’t support JavaScript will choke on that href value. A more common approach is to use event handlers in combination with a meaningless href value:

<a href="#" onclick="doSomething();">click for fun</a>

That’s slightly better but it’s semantically meaningless. Why mark up a piece of text as a link unless it goes somewhere?

<a href="arealpage.html" onclick="doSomething(); return false;">click for fun</a>

Now we’re getting somewhere. The link makes sense even if JavaScript isn’t enabled (and, for the first time, the link is spiderable). But the problem remains that the event handler is mixed in with the markup. Inline event handlers are the JavaScript equivalent of inline style declarations. Fortunately, the event handlers can be removed and placed in an external file, just as you would do with CSS. And, just as with CSS, you can add hooks to your markup to target the elements you want to play with:

<a href="arealpage.html" class="fun">click for fun</a>

In an external JavaScript file, you could now write a script to find all the links that have a className of “fun” and have them execute a function—doSomething()—when they are clicked.

Separating out behavior from markup like this is called unobtrusive JavaScript.

Enough theory. I’m going to apply this technique to a real-world example.

[.Gertjan.]

GJ-tje schreef op woensdag 24 oktober 2007 @ 10:11:
[...]
Als je return false; in je onclick zet, dan stopt ie toch de onclick event en niet het openen van de URL in de browser? Tenminste, ik zou het wel ontzettend scheef vinden...

Naar mijn weten stopt hij bij een return true; inderdaad met het uitvoeren van de onclick en gaat hij door met de rest van het event (link openen), maar een return false; stopt heel het event (een link openen is een click, zelfs als het met het toetsenbord gedaan wordt) en zal de link niet geopend worden.

Dit principe wordt volgens mij ook toegepast bij formvalidatie in de onSubmit. Als je return false; zegt zal de submit niet doorgaan. Is de code klaar of return je een true zal hij wel submitten.

[.Gertjan.]

Verwijderd schreef op woensdag 24 oktober 2007 @ 10:22:
De ideale oplossing is:

PHP:

echo '<a href="' . $rip . '" onclick="document.getElementById(\'mainImage\').src=\'' . $rip . '\';return false;">link naar prent</a>';

Zo zal de browser linken naar de prent indien js disabled is ofwel de image in de div plaatsen indien js enabled is.


[...]

Helemaal mee eens dat dat de beste manier van oplossen is. Daarmee maak je de site toegankelijk voor mensen zonder javascript (met bijvoorbeeld screenreaders) en mensen die graag een bulk linkjes in nieuwe tabs openen om ze later te bekijken. Is nu wel vevelend als ze daar de zelfde pagina zien omdat er # is gebruikt of dat er in het nieuwe venster een Javascript statement staat (die meestal niet zal werken).

Zoals ik ook al aangaf is het bijvoorbeeld nuttig om een statische pagina te tonen in plaats van eentje die met JS gemaakt wordt. Of zoals in dit geval de afbeelding (afhankelijk van de site natuurlijk).

[disjfa]

GJ-tje schreef op woensdag 24 oktober 2007 @ 10:11:
[...]
Tenminste, ik zou het wel ontzettend scheef vinden...

Je zou het ook eerst kunnen nazoeken in de documentatie voordat je er opmerkingen over maakt zonder te weten wat het eigenlijk doet. Voegt ook vrij weinig toe aan de werkbaarheid en overzichtenlijkheid van een topic.

De gebruikersviendelijke manier die al een paar keer is aangewezen is gewoon de goede oplossing.

[Verwijderd]

GJ-tje schreef op woensdag 24 oktober 2007 @ 10:11:
[...]
Als je return false; in je onclick zet, dan stopt ie toch de onclick event en niet het openen van de URL in de browser? Tenminste, ik zou het wel ontzettend scheef vinden...

Test maar wat hiermee gebeurt:

HTML:

<a href="http://www.google.nl" onclick="return false">klik</a>.

[.Gertjan.]

Verwijderd schreef op woensdag 24 oktober 2007 @ 11:38:
[...]


Test maar wat hiermee gebeurt:

HTML:

<a href="http://www.google.nl" onclick="return false">klik</a>.

Zelf voor de zekerheid ook maar eens even getest, want begon toch wel een klein beetje te twijfelen (eigenlijk wel slecht voor iemand die AJAX applicaties maakt die hier gebruik van maken). Maar zoals verwacht gaat de browser nergens heen als er op de link wordt geklikt.

HTML:

<a href="http://www.google.nl" onclick="return true">klik</a>.

gaat overigens (zoals verwacht) wel naar google.nl

[ Voor 6% gewijzigd door .Gertjan. op 24-10-2007 12:13 . Reden: Resultaat van test even erbij gezet ]

[BtM909]

Ook logisch. onclick is een eventhandler die veroorzaakt wordt door het klikken op het element (in dit geval een <a> oftewel een link. Wil je de natuurlijke (beter gezegd: geprogrammeerde) behaviour door laten gaan nadat de JS code in onclick is uitgevoerd, dan returned onclick default true. Wil je de behaviour niet door laten gaan, dan return je false (wat dus niks hoeft te zeggen over de functionaliteit in de onclick.

[shnazzle]

Ik zou zeggen, drop die <a>, want die is bedoeld voor links. Gebruik het dan ook daarvoor.
Ik gebruik dan liever een <div> met onclick, en voor de div de muispointer stylen "cursor:pointer".
Zo ziet de gebruiker dat het iets klikbaars is, maar is je code gewoon schoon en semantisch/syntactisch correct.

[Verwijderd]

@shnazzle: en hoe moeten mensen zonder javascript dan de foto's bekijken?

[disjfa]

shnazzle schreef op woensdag 24 oktober 2007 @ 15:25:
Zo ziet de gebruiker dat het iets klikbaars is, maar is je code gewoon schoon en semantisch/syntactisch correct.

Zo haal je heel de semantiek uit de code bedoel je. Een link is om op te klikken. Dus werkt al zoals de ts wilt. Een div is een uitsnede van je website en is absoluut niet gemaakt voor dit soort gekkigheid.

[ Voor 21% gewijzigd door disjfa op 24-10-2007 16:03 ]

[shnazzle]

disjfa schreef op woensdag 24 oktober 2007 @ 16:03:
[...]

Zo haal je heel de semantiek uit de code bedoel je. Een link is om op te klikken. Dus werkt al zoals de ts wilt. Een div is een uitsnede van je website en is absoluut niet gemaakt voor dit soort gekkigheid.

Kan ik deels mee eens zijn, maar een <div> is veel meer geschikt voor dit soort dingen dan een <a href> voor de redenen die hierboven zijn omschreven. Een link moet linken naar een pagina of anchor. De definitie van <div> kun je nog doortrekken naar een knopfunctie. Ook niet optimaal, maar toch.

Voor de rest...ik heb nooit gezegd dat jscript niet gebruikt moet worden... dus waar dat vandaan komt..

Dus, <div> vs <a> ...ik ben voor <div>. Misschien is <span> een leuke tussenweg

[ Voor 9% gewijzigd door shnazzle op 24-10-2007 16:35 ]

[.Gertjan.]

shnazzle schreef op woensdag 24 oktober 2007 @ 16:31:
[...]


Kan ik deels mee eens zijn, maar een <div> is veel meer geschikt voor dit soort dingen dan een <a href> voor de redenen die hierboven zijn omschreven. Een link moet linken naar een pagina of anchor. De definitie van <div> kun je nog doortrekken naar een knopfunctie. Ook niet optimaal, maar toch.

Voor de rest...ik heb nooit gezegd dat jscript niet gebruikt moet worden... dus waar dat vandaan komt..

Dus, <div> vs <a> ...ik ben voor <div>. Misschien is <span> een leuke tussenweg

Voor knoppen zijn dan weer <button> tags. Het is namelijk lastig (al dan niet onmogelijk) om bijvoorbeeld naar een div te navigeren met behulp van de toetsen en daar een "click" te simuleren. Op een knop en link kan dit wel.

Dat zou inhouden dat de gebruiker altijd een muis moet gebruiken om iets op de site voor elkaar te krijgen.

De discussie of een link nodig is of dat je een andere tag moet gebruiken ligt ook een beetje aan de situatie en wat de "link" moet doen, bij het tonen van een afbeelding, of tekst is imo een link nodig die een script in de onclick heeft maar ook een href die naar een statische pagina wijst.

Voor het wisselen van gedrag op de pagina iets van een knop of checkbox (bijvoorbeeld: menu links of rechts).

Dit zou natuurlijk het ultime zijn om na te streven, maar helaas kan je niet voor alle situaties/content statische pagina's maken en zijn er ook vast nog andere problemen.

Een ander voordeel (wat ik nog niet gezien had) van statische content achter de href plaatsen is dat de zoekmachines dit ook kunnen indexeren. Google kan (nog) geen scripts interpeteren en onclick events uitvoeren. Hrefs gaat hem wel goed af

[moozzuzz]

disjfa schreef op woensdag 24 oktober 2007 @ 16:03:
Een link is om op te klikken.

Neen een link is om te linken naar een intern of extern bestand. Maar ik geloof dat we wat van het topic aan het afwijken zijn.

[shnazzle]

...owned by Gertjan. Met je eens.
Toch vind ik het geen goede oplossing, maar aangezien dat hetgeen is wat HTML aanbiedt...I'll take it.

Zijn er oplossing, behalve <button>? En tot hoevere ie <button> 'ingeburgerd'?