Array komt niet volledig door in innerHTML

Status
Niet open voor verdere reacties.
darkmouse

darkmouse

Gebruiker
Lid geworden
12 apr 2009
Berichten
15
In geval 1 krijg ik keurig de arraywaarden onder elkaar gepresenteerd.
In geval 2, wanneer ik de waarden dus in een gepositioneerde div wil stoppen krijg ik alleen de laatste waarde "c" in de div :mad:

Wie heeft hier een oplossing voor?

HTML: 
<script language="javascript">
function submitSave()
  {
     var lijst  = new Array("a","b","c");

     for (i=0; i < lijst.length; i++)
     {
                 // geval 1:
		 //document.write(lijst[i] + "<br/>");
                 // geval 2:
		 document.getElementById('namen').innerHTML = (lijst[i] + "<br/>")
		    
     }
  }
</script>  

</head>

<body>
<form>
<input type="button" onclick="submitSave()" value="show array" />
</form>
<div id="namen"></div>
</body>
</html>
 
Laatst bewerkt door een moderator:
Wat je doet is steeds als je door de loop loopt, de hele inhoud van de div wissen en de nieuwe inhoud erin zetten.

Wat je wilt is:

PHP: 
<script language="javascript">
function submitSave () {
  var lijst = new Array ( "a" , "b" , "c" );

  for ( var i = 0 ; i < lijst.length ; i++ ) {
    document.getElementById('namen').innerHTML += (lijst[i] + "<br/>")
  }

}
</script>

Door += te gebruiken, wordt de nieuwe tekst achter de bestaande inhoud geplakt.
 
Vermijd innerHTML

Ik zou innerHTML helemaal vermijden als ik jou was. Het lijkt handig, maar veroorzaakt veel kleinde foutjes (zoals deze) doordat string manipulatie gewoon lastig.

Probeer eens de varianten van het W3C. Bijvoorbeeld in dit geval wil je tekst toevoegen aan een node. De aangewezen methodes zijn daarvoor:

* document.createTextNode('text');
* element.appendChild(node);

Code: 
<script type="text/javascript">
    function submitSave() {
      var lijst = ["a","b","c"];
      var namen = document.getElementById('namen');
      for (var i=0, len=lijst.length; i<len; i++) {
        var text = document.createTextNode(lijst[i]);
        namen.appendChild(text);
      }
    }
  </script>
</head>
<body>
  <form>
    <input type="button" onclick="submitSave()" value="show array" />
  </form>
  <div id="namen"></div>
</body>

Om andere types nodes te creeren gebruik je andere methods, maar meestgebruikt is document.createElement(name), bijvoorbeeld document.createElement('p'), document.createElement('div'), document.createElement('input') etc.

Succes ermee!
 
Thanx!

+= doet al wonderen! :)

Ik ga me even verdiepen in het document.createTextNode('text'); verhaal.
Dat stond niet in de boekjes! (je vraagt je soms af waarom je ze koopt :( )
Ik zie hierdoor opeens een heleboel nieuwe mogelijkeheden.

Dank!
 
Nee, de oudere boekjes vermelden die methods niet omdat ze pas later zijn ontstaan. Nu zijn ze al wer zo'n 10 jaar oud en elke browser support ze wel. Zoek op "w3c dom javascript" e.d. voor meer info.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan