login  Naam:   Wachtwoord: 
Registreer je!
 Forum

HTML in een Javascript array

Offline vdmjordy - 14/01/2009 17:03
Avatar van vdmjordyNieuw lid Ik heb een array in javascript. De output hiervan wil ik in een div laten uitkomen. Echter plaatst hij de gehele array achter elkaar erin.

Hij plaatst t als volgt:
boek1boek2boek3 etc

terwijl het moet als
boek1
boek2
boek3
etc

De code:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3.  
  4. <title>Javascript</title>
  5.  
  6. <link rel="stylesheet" href="style.css" type="text/css">
  7.  
  8.  <script type="text/javascript">
  9.               // setup the main array
  10.               var setArray = Array("Boek1", "Boek2", "Boek3", "Boek4", "Boek5","Boek6");
  11.  
  12.               // insert the array into the DIV smalltest object
  13.               function insertArray()
  14.               {
  15.                      var theText = ""; // set the theText output to an empty string otherwise it would start with null.
  16.                      for (var i=0; i < setArray.length; i++)
  17.                      {
  18.                             // create the array of text to insert
  19.                             theText += setArray[i];
  20. 			    theText += "\n"; // voor de regel tussen de array records
  21. 		     }
  22.                      // create the createTextNode
  23.                      var insertText = document.createTextNode(theText);
  24.                      document.getElementById("assortiment").appendChild(insertText);
  25.               }
  26.        </script>
  27.  
  28. </head>
  29.  
  30. <body>
  31.  
  32.  
  33. 	<div class="loginbalk">
  34. 		<div class="divcenter">
  35. 		  <div class="loginkolom">
  36.  
  37. 		<img src="images/stip.gif" border="0" height="5" width="266">
  38.     		<span class="blauw">ASSOR</span><span class="zwart">TIMENT</span>
  39.             	<img src="images/stip.gif"  border="0" height="5" width="266">
  40.  
  41. 			  <div class="tekstzwart" id="assortiment">
  42. 	        </div>
  43. 		</div>
  44. 		</div>
  45.  
  46. <input type="submit" value="Bekijk alle boeken" onClick="javascript:insertArray()" />
  47.  
  48. </div>
  49. </body></html>

10 antwoorden

Gesponsorde links
Offline Sander1993 - 14/01/2009 17:19
Avatar van Sander1993 PHP interesse vervang de \n door <br />\n
Offline vdmjordy - 14/01/2009 18:10
Avatar van vdmjordy Nieuw lid Dan krijg ik de volgende output

Boek1<br /> Boek2<br /> Boek3<br />
Offline Sander1993 - 14/01/2009 18:36
Avatar van Sander1993 PHP interesse en dit:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var insertText = document.createTextNode(theText);
  2. document.getElementById("assortiment").appendChild(insertText);
  3. //naar dit:
  4. document.getElementById("assortiment").innerHTML = insertText;

misschien??
Offline vdmjordy - 14/01/2009 19:32
Avatar van vdmjordy Nieuw lid Dan krijgi k dit als output

[object Text]
Offline Sander1993 - 14/01/2009 19:37
Avatar van Sander1993 PHP interesse ok helemaal vanaf het begin,
vervang \n door &lt;br /&gt;
Offline vdmjordy - 14/01/2009 19:46
Avatar van vdmjordy Nieuw lid Top dat je probeert mee te denken!!

Ik krijg dan dit als output:
Boek1&lt;br /&gtBoek2&lt;br /&gtBoek3&lt;br /&gtBoek4&lt;br /&gtBoek5&lt;br /&gtBoek6&lt;br /&gt

Dus hij geeft plain gewoon die tekst weer

theText += "&lt;br /&gt"; heb ik nu dus gedaan
Offline Abbas - 14/01/2009 19:48
Avatar van Abbas Gouden medaille

Crew .NET		 Moet je dan ook niet die .innerHtml() gebruiken? Geef anders eens een stuk van de code dat je nu hebt! 
Offline Sander1993 - 14/01/2009 19:59
Avatar van Sander1993 PHP interesse was al geprobeerd maar werkt ook niet
Offline vdmjordy - 14/01/2009 20:04 (laatste wijziging 15/01/2009 18:55)
Avatar van vdmjordy Nieuw lid alle code die ik gebruik staat in de openings post.

Edit:

Probleem opgelost. Heb de code verbouwd naar:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. for (var i=0; i < setArray.length; i++)
  2.                      {
  3.                             // create the array of text to insert
  4.                             document.getElementById("assortiment").innerHTML += setArray[i];
  5. 			    document.getElementById("assortiment").innerHTML += "<br />"; // voor de regel tussen de array records
  6. 		     }                                      
  7. 		}
Offline Jas_per_post - 12/03/2009 18:04 (laatste wijziging 12/03/2009 18:08)
Avatar van Jas_per_post JS interesse Het probleem was dat je maar 1 node aan het make was. In html is er geen linebreak te maken binnen een node, dus wat je eigenlijk wil is zoiets:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. div | TextNode : boek1
  2.      | Br-node
  3.      | TextNode : boek2
  4.      | Br-node
  5.      | TextNode: boek3


Dus:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. // setup the main array
  3. var setArray = Array("Boek1", "Boek2", "Boek3", "Boek4", "Boek5","Boek6");
  4.  
  5. // insert the array into the DIV smalltest object
  6. function insertArray()
  7. {
  8. 	// create a place to dump our nodes into, so we don't need to modify the rendered html all the time (that's slow)
  9. 	var frag = document.createDocumentFragment(); 
  10.  
  11. 	for (var i=0; i < setArray.length; i++)
  12. 	{
  13. 		// create the array of text to insert
  14. 		frag.appendChild(document.createTextNode(setArray[i]));
  15. 		frag.appendChild(document.createElement('br')); // voor de regel tussen de array records
  16. 	}
  17.  
  18. 	// create the createTextNode
  19. 	document.getElementById("assortiment").appendChild(frag);
  20. }
  21. </script>


Overigens gebruik ook ik vaker innerHTML dan de nette DOM-manier, maar dit is het antwoord op de vraag zoals deze helemaal aan het begin gesteld is.

edit: er moet eens door de admins naar de code bb-tag worden gekeken, want ik had een complete tag en eentje die ik was vergeten af et sluiten en mijn hele post verdween!
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.211s