Vraag & Antwoord

Webprogrammeren & scripting

[Javascript] Hoe krijg ik een extensie achter de value?

4 antwoorden
  • Iets in me zegt dat het doodsimpel is, maar tja, Javascript, mijn lastige kindje. Waar PHP bij wijze van spreken nog slapend bij me naar binnen vliegt, wil Javascript na uren blokken nog niet blijven hangen. Wat ik wil doen: Ik ben voor een wielrenners site bezig een formuliertje te bouwen waar sponsors zich kunnen aanmelden. In dat formulier zit een dropdownmenu (<select>) van alle deelnemende wielrenners Op het moment dat je een andere renner in het dropdown menu kiest, veranderd onmiddelijk het plaatje van de betreffende renner er naast mee (onChange dus) Nou ja, het zou moeten veranderen ;-) Wat ik al heb: Een functie: [code:1:c0fff0ee40]function ChangeImage() { document.images['image'].src = document.forms['sponsorform'].elements['rennernaam'].value; }[/code:1:c0fff0ee40] Een HTML select menu (vereenvoudigd weergegeven): [code:1:c0fff0ee40] <form name="sponsorform"> <select name="rennernaam" onChange="javascript:ChangeImage();"> <option>Jaap de Vries</option> <option >Henk Verstappen</option> </select> </form> [/code:1:c0fff0ee40] En uiteraard een plaatje om te veranderen [code:1:c0fff0ee40]<img src="renners/default.jpg" alt="Renner" width="125" height="125" id="image" />[/code:1:c0fff0ee40] Werken doet het niet en de reden daarvan is waarschijnlijk omdat bij het wijzigen van het src attribuut enkel de waarde van het selectieveld wordt doorgegeven. (Dan krijg je dus src="Henk Verstappen") Nu staan de afbeeldingen welliswaar als 'voornaam achternaam.jpg' in de image directory, maar de jpg extensie ontbreekt dus. Dus op de manier die ik al heb moet de .jpg extensie nog worden toegevoegd, en dat krijg ik maar niet voor elkaar. document.forms['sponsorform'].elements['rennernaam'].value+".jpg" daar wordt niet ingetrapt.
  • Als je een jquery library include, dan kan je gebruik maken van de volgende code: [code:1:c27a92370c] function ChangeImage() { var selectedItem = $('[name="rennernaam"]').val(); $("#Image").attr("src", selectedItem + ".jpg"); } [/code:1:c27a92370c] Om jquery te gebruiken moet je deze regel toevoegen, als extern javascript bestand [code:1:c27a92370c] <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> [/code:1:c27a92370c] Wil je toch liever de old fashion way, dan moet je het maar zeggen. [/code]
  • Ik zat inderdaad te overwegen om het met jQuery op te lossen. (Ik ging er althans van uit dat jQuery daar wel een oplossing voor zou hebben). Maar ik dacht: "Om Jquery nu te installeren voor een functie is wat overdone". Maar dat hoeft dus niet :-)
  • het antwoord staat er indirect toch al: [code:1:b287840add]selectedItem + ".jpg"[/code:1:b287840add] of in jouw code: [code:1:b287840add]function ChangeImage() { document.images['image'].src = document.forms['sponsorform'].elements['rennernaam'].value + ".jpg"; }[/code:1:b287840add]

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.