Aanroepen van javascriptfuncties en variabelen werkt niet goed

Status
Niet open voor verdere reacties.
W

wesleyvoo

Gebruiker
Lid geworden
14 jan 2012
Berichten
6
Hallo Allemaal,

Ik ben aan het testen met het volgende script, zodat ik het later kan verwerken in een groter script.

[JS]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<script type="text/javascript">
function testDetail(b){
if(b>=0){
autoid = 10;

}
else{
autoid = 1;

}
alert(autoid);
}

</script>
<a href="javascript:testDetail(2);">link javascript </a>
<script type="text/javascript">
document.write(autoid);

</script>
</body>
</html>[/JS]

Zoals je ziet is het een link die naar een functie verwijst. De bedoeling is dat als men op de link klinkt dat document.write(autoid), dan de nieuwe autoid moet geven. Jammer genoeg doet hij dit niet. Weet iemand waar dit aan kan liggen?
 
document.write wordt direct uitgevoerd. Dus, als de pagina laad zal 'ie writen wat op dat moment in de var staat, wat dus undefined is omdat je de variabele autoid nooit hebt geinitialized hebt. Daarnaast kan je zowiezo beter geen document.write gebruiken, maar bv. innerHTML. Ohja, en het is handig om je HTML ook te indenten. En javascript:... hrefs zijn 1997, het kan beter via een onclick (of nog beter, event listeners, maargoed). Dit is wat je denk ik wilt:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
   </head>
 
   <body>



      <span id='output'>
         hier komt het autoid als je op de link klikt!
      </span>


      <a onclick='testDetail(2);'>klik mij!</a>




      <script type="text/javascript">

// script expres niet geindent :)


var autoid = 0;   // init de var 'autoid' voor gebruik
var handle = document.getElementById('output');   // een referentie naar het HTML element met ID 'output'


function testDetail(b)
{
   if(b >= 0)
   {
      autoid = 10;
   }else{
      autoid = 1;
   }

   handle.innerHTML = autoid;
}



      </script>


   </body>

</html>

noot dat de Javascript onder de HTML komt, omdat je anders geen referenties naar elementen kunt maken via .getElementById().
 
Variabelen niet als tekst nodig

Dankjewel voor je antwoord.

Dit zou mijn oplossing zijn als ik die span / div met meer kan vullen als alleen een tekstregeltje? Er moet namelijk meerdere div's zichtbaar worden.

Kan ik in innerHTML ook tables of divs of wat dan ook toevoegen?
 
Ja, het heet innerHTML omdat het vanzelf de HTML parsed die je erin gooit. Bijvoorbeeld:

[js]elem.innerHTML = 'Dit is een stukje text. Dit is <strong>dikgedrukt</strong>.<p>Een nieuwe paragraaf</p>. En ook een <div id="iets">div element!</div>';[/js]

Het is niet heel netjes, en soms is het handiger om elementen al in de HTML te zetten ipv. ze te bouwen met innerHTML. Helemaal omdat je moet rommelen met quotes (en het natuurlijk langzamer is).
 
Laatste vraagje

Guy,

Ik laat je even het script / table zien die ik visible wil laten worden en waar de variable in terecht moet komen. Zoals je misschien ziet en waar ik nu ook tegen aan loop: er zitten ook nog wat loops en berekeningen in dit stuk. Dit kan ik niet in de innerHTML plaatsen. Ik heb het in ieder geval getest, maar werkt tot zover niet. Is er dan een manier om dit toch in de betreffende div terecht te laten komen?

Of wat eigenlijk mijn doel was. Zoals je ziet komt er een aantal maal AutoID voor in het script. Dit moet de waarde van de variabele krijgen die ik met de link meestuur. Is er een manier om dit voor elkaar te krijgen? Dan is het probleem ook opgelost!

[JS]<div id="od" style="width:850px; height:600px; background-color:#F00; position:fixed; top:25px; margin-left:auto; display:none; margin-right:auto;">
<table width="850" border="1" bordercolor="#fffbd5" bgcolor="#2a2a24" cellspacing="0" cellpadding="0">
<tr>
<td height="600" valign="top"><table width="850" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="100"><table width="850" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="100"><script type="text/javascript">
//Dit is de eerste pagina, met de algemene informatie
//hieronder is de variabele voor het voertuig. de 0 is het id van het voertuig en moet later dus worden ingevuld met de variabelen.
var x=xmlDoc.getElementsByTagName("voertuig")[AutoID];

//er is geen loop nodig want dit zijn een vast aantal gegevens.
document.write("<p style=\"margin-left:25px; color:#fffbd5; font-family:Arial, Helvetica, sans-serif; font-size:20px;\">" + (x.getElementsByTagName("merk")[0].childNodes[0].nodeValue) + " " + (x.getElementsByTagName("model")[0].childNodes[0].nodeValue) + " " + (x.getElementsByTagName("type")[0].childNodes[0].nodeValue) + "</p>");
</script></td>
<td width="100"><a href="#" onclick="javascript:occasionD(); return false;"><img src="images/btnClose.png" border="0" alt="" /></a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="25"><a class="menuAutoDetail" href="javascript:showonlyone('newboxes1');">ALGEMEEN</a> <a class="menuAutoDetail" href="javascript:showonlyone('newboxes2');">ACCESOIRES</a> <a class="menuAutoDetail" href="javascript:showonlyone('newboxes3');">OPMERKINGEN</a></td>
</tr>
<tr>
<td height="350"><table width="850" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="425" height="304">
<div name="newboxes" id="newboxes1" style="display: block; position:relative; width:375px; height:304px; left:25px; top:0; overflow:auto;">
<script type="text/javascript">
//Dit is de eerste pagina, met de algemene informatie
//hieronder is de variabele voor het voertuig. de 0 is het id van het voertuig en moet later dus worden ingevuld met de variabelen.
var x=xmlDoc.getElementsByTagName("voertuig")[AutoID];

//er is geen loop nodig want dit zijn een vast aantal gegevens.
document.write("<div id=\"accessoireRegel\"><p class=\"standard\">Transmissie: " + (x.getElementsByTagName("transmissie")[0].childNodes[0].nodeValue) + "</p></div>");
document.write("<div id=\"accessoireRegel\"><p class=\"standard\">Brandstof: " + (x.getElementsByTagName("brandstof")[0].childNodes[0].nodeValue) + "</p></div>");
document.write("<div id=\"accessoireRegel\"><p class=\"standard\">Bouwjaar: " + (x.getElementsByTagName("bouwjaar")[0].childNodes[0].nodeValue) + "</div>");
document.write("<div id=\"accessoireRegel\"><p class=\"standard\">Kilometerstand: " + (x.getElementsByTagName("tellerstand")[0].childNodes[0].nodeValue) + "</p></div>");
document.write("<div id=\"accessoireRegel\"><p class=\"standard\">Basiskleur: " + (x.getElementsByTagName("basiskleur")[0].childNodes[0].nodeValue) + "</p></div>");
document.write("<div id=\"accessoireRegel\"><p class=\"standard\">BTW / Marge: " + (x.getElementsByTagName("btw_marge")[0].childNodes[0].nodeValue) + "</p></div>");
document.write("<div id=\"accessoireRegel\"><p class=\"standard\">Prijs: €" + (x.getElementsByTagName("verkoopprijs_particulier")[0].childNodes[0].nodeValue) + ",-</p></div>");
</script>
</div>
<div name="newboxes" id="newboxes2" style="display: none; position:relative; width:375px; height:304px; left:25px; top:0; overflow:auto;">
<script type="text/javascript">
//hieronder is de variabele voor het voertuig. De eerste 0 is het ID van het voertuig. Dit moet later met een variabele dus worden ingevuld.
var x=xmlDoc.getElementsByTagName("voertuig")[AutoID].getElementsByTagName("accessoires")[0].getElementsByTagName("accessoire");

for (i=0;i<x.length;i++)
{
document.write("<div id=\"accessoireRegel\"><p class=\"standard\">" + (x.childNodes[0].nodeValue) + "</p></div>");
}
</script>
</div>
<div name="newboxes" id="newboxes3" style="display: none; position:relative; width:375px; height:304px; left:25px; top:0; overflow:auto;">
<script type="text/javascript">
//De opmerkingen pagina
var x=xmlDoc.getElementsByTagName("voertuig")[AutoID];

//er is geen loop nodig want dit zijn een vast aantal gegevens.
document.write("<div style=\"position:relative; width:94%; padding:10px; background-color:#fffbd5; magin-bottom:5px;\"><p class=\"standard\">" + (x.getElementsByTagName("opmerkingen")[0].childNodes[0].nodeValue) + "</p></div>");
</script>
</div>
</td>
<td width="425" align="center">
<script type="text/javascript">
//hieronder is de variabele voor het voertuig. De eerste 0 is het ID van het voertuig. Dit moet later met een variabele dus worden ingevuld.
var fotox=xmlDoc.getElementsByTagName("voertuig")[AutoID].getElementsByTagName("aantal_afbeeldingen")[0].childNodes[0].nodeValue;
var voertuigx=xmlDoc.getElementsByTagName("voertuig")[AutoID].getElementsByTagName("voertuignr_hexon")[0].childNodes[0].nodeValue;

document.write("<img id=\"bigF\" src=\"images/"+ voertuigx +"-1.jpg\" height=\"304\" width=\"400\"/>");
</script>

</td>
</tr>
</table></td>
</tr>
<tr>
<td height="175">
<div style="width:50px; padding-top:45px; height:125px; float:left;"><a href="#" id="gallery-prev"><img src="images/btnPrev.png" border="0" alt="" /></a></div>
<div id="gallery-wrap">
<ul id="gallery">
<script type="text/javascript">
//hieronder is de variabele voor het voertuig. De eerste 0 is het ID van het voertuig. Dit moet later met een variabele dus worden ingevuld.
var fotox=xmlDoc.getElementsByTagName("voertuig")[AutoID].getElementsByTagName("aantal_afbeeldingen")[0].childNodes[0].nodeValue;
var voertuigx=xmlDoc.getElementsByTagName("voertuig")[AutoID].getElementsByTagName("voertuignr_hexon")[0].childNodes[0].nodeValue;

for (i=1;i<=fotox;i++)
{
document.write("<li><a href=\"javascript:bigFoto(\'images/"+ voertuigx +"-"+ i +".jpg\');\"><img src='images/"+ voertuigx +"-"+ i +".jpg' /></a></li>");
}
</script>
</ul>

</div>
<div style="width:50px; padding-top:45px; height:125px; float:left;"><a href="#" id="gallery-next"><img src="images/btnNext.png" border="0" alt="" /></a></div>

</td>
</tr>
</table></td>
</tr>
</table>
</div>[/JS]
 
Okay, zo te zien kan alles een stuk efficienter. Alleen regels 34 t/m 40 al - dat moet wel in 3, 4 regels kunnen :) 'Er is geen loop nodig' is natuurlijk leuk, maar de code wordt er wel een stuk duidelijker, efficienter en netter van.

Heb je toevallig ergens een voorbeeld XML liggen, en de complete XML laad code? Dat maakt het testen hier een stuk makkelijker.
 
Laatst bewerkt:
het is me gelukt :) ik heb de for loopjes er buiten verwerkt. op die manier kon het ook. heel erg bedankt voor alle hulp!
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan