anoniem Geplaatst: 13 januari 2004 Delen Geplaatst: 13 januari 2004 Ik ben een zoekformulier aan het maken waar ik al mijn zoekacties wil concentreren om op die manier efficienter te werken. Hoewel de pagina voornamelijk uit HTML bestaat en valideert als XHTML 1.1 wil ik graag een aantal dingen afhandelen met JavaScript, uiteraard via het W3C DOM. Bij Google wil ik dynamisch kunnen schakelen tussen zoeken naar tekst en zoeken naar afbeeldingen. De standaardfuncties zijn geïmplementeerd in het HTML, de laatste optie wordt toegevoegd door JavaScript. HTML:[code:1:ff006a5b08] <!-- Google zoeken --> <form action="http://google.nl/search" name="f" method="get" id="google"> <fieldset> <p><img src="googlelogo.gif" alt="Google" title="" /></p> <p> <input type="text" maxlength="256" name="q" value="" size="40" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="hidden" name="oe" value="UTF-8" /> <input type="hidden" name="hl" value="nl"/> <input type="submit" name="btnG" value="Zoek" /> </p> <p> <input type="radio" name="lr" value="" id="all" checked="checked" /> <label for="all">Alle talen</label> <input type="radio" name="lr" value="lang_nl" id="il" /> <label for="il">Nederlands</label> </p> </fieldset> </form>[/code:1:ff006a5b08]Hier zal voor niemand wat bijzonders bij staan, dus hier een gedeelte van het JavaScript:[code:1:ff006a5b08] // Variabelen declareren var googleForm = document.getElementById("google"); var googlePara = googleForm.getElementsByTagName("p")[2]; var googleImgButton = document.createElement("input"); var googleImgLabel = document.createElement("label"); // Attributen instellen googleImgButton.setAttribute("type","radio"); googleImgButton.setAttribute("id","googleImg"); googleImgLabel.setAttribute("for","googleImg"); // Elementen in HTML voegen googlePara.appendChild(googleImgButton); googleImgLabel.appendChild(document.createTextNode("Afbeeldingen")); googlePara.appendChild(googleImgLabel); alert(document.getElementsByTagName("body")[0].innerHTML); [/code:1:ff006a5b08]Bovenstaande code voegt dus een radiobutton en een label toe. Als laatste even een alert ingebouwd om de gegenereerde code te controleren. Op zich doet alles het zoals ik het verwachtte, maar... als ik de derde - JavaScript - radiobutton aanklik blijkt deze onafhankelijk van de andere twee te werken. Dit is natuurlijk niet de bedoeling en bijzonder irritant. Iemand een idee over hoe ik dit kan oplossen? - Bas Quote Link naar reactie
anoniem Geplaatst: 13 januari 2004 Auteur Delen Geplaatst: 13 januari 2004 Geef je de radio buttons wel een name attribute? Radio buttons groepeer je met hun name attribute. Quote Link naar reactie
anoniem Geplaatst: 13 januari 2004 Auteur Delen Geplaatst: 13 januari 2004 Oeps... :roll: Is bovenstaande code trouwens de korste manier om iets toe te voegen? Ik ben absoluut voor JSDOM, maar tov [i:53566854e5]document.write[/i:53566854e5] is het een hoop extra regels... - Bas Quote Link naar reactie
anoniem Geplaatst: 13 januari 2004 Auteur Delen Geplaatst: 13 januari 2004 Met 'innerHTML' zou het ook kunnen. XHTML1.1 (met application/xhtml+xml, ik neem aan dat je dat gebruikt?), maakt het echter onmogelijk en beperkt je tot het W3C dom (niet dat het erg is). Quote Link naar reactie
anoniem Geplaatst: 13 januari 2004 Auteur Delen Geplaatst: 13 januari 2004 [quote:cfadf57242="termin8or"]XHTML1.1 (met application/xhtml+xml, ik neem aan dat je dat gebruikt?)[/quote:cfadf57242]Uiteraard... :D Ach, het is niet anders, maar het werkt iig perfect. - Bas Quote Link naar reactie
anoniem Geplaatst: 13 januari 2004 Auteur Delen Geplaatst: 13 januari 2004 Inderdaad werkt innerHTML niet goed in xhtml-mode. Ik was eigenlijk al verbaasd dat het lezen van de innerHTML property wel werkte. Als je bepaalde dom functies vaak gebruikt, kun je ze inkorten. Voorbeeld: [code:1:743b206688] <html> <head> <title>Untitled</title> <script type="text/javascript"> gettag=function(tag,nr){return document.getElementsByTagName(tag)[nr]} </script> </head> <body> <button onclick="alert(gettag('body',0).innerHTML)">test</button> </body> </html> [/code:1:743b206688] Het zou toch wel handig zijn geweest als er een standaard functie was om grote lappen tekst/markup naar een document-fragment om te kunnen zetten. Je ziet dat de meeste browser-makers toch zo'n functie hebben ingebouwd, standaard of niet standaard, omdat het zo handig is. Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen