CODEWITHSUNDEEP
javascriptjqueryhtml
Mathias Rechtzigel
Mathias Rechtzigel

Reputation: 3604

Javascript - Creating a series of <a> tags within a div

I'm trying to create a series of anchor tags that increment by 1 within the wunderNav div.

When I run this loop with console.log(counter); It gives me a nice list 1 - XX. When I try to add the anchor tags it only appends the last of the series.

for(var counter = 1; counter <= thisGM.grids.length; counter++){
    document.getElementById('wunderNav').innerHTML = '<a id="wunderNumber'+ counter +'" href="javascript:thisGM.goToGridPage('+ counter + ');">' + counter + '</a>';
}

Thanks everyone, fairly new to javascript and I was smashing my head against the wall!

Here is what I needed:

 for(var counter = 1; counter <= thisGM.grids.length; counter++){
    document.getElementById('wunderNav').innerHTML += '<a id="wunderNumber'+ counter +'" href="javascript:thisGM.goToGridPage('+ counter + ');">' + counter + '</a>';}

Upvotes: 0

Views: 110

Answers (5)

Leo
Leo

Reputation: 1231

Try this:

for(var counter = 1; counter <= thisGM.grids.length; counter++){

    document.... += '<a id="wunder....">' + counter + '</span>';

}

Use += insted of =. This is because you need to join every anchor tag to the previous one.

Good luck

Upvotes: 0

BLenau
BLenau

Reputation: 95

You are wiping away the contents of the wunderNav every iteration of the loop. Use += instead of just = to append to the current innerHTML of the div.

document.getElementById('wunderNav').innerHTML += '<a id="wunderNumber'+ counter 
    +'" href="javascript:thisGM.goToGridPage('+ counter + ');">' 
    + counter + '</span>';}

Upvotes: 1

Runedrake
Runedrake

Reputation: 21

for(var counter = 1; counter <= thisGM.grids.length; counter++){
  document.getElementById('wunderNav').innerHTML += '<a id="wunderNumber'+ counter +'" href="javascript:thisGM.goToGridPage('+ counter + ');">' + counter + '</a>';
}

Upvotes: 1

letiagoalves
letiagoalves

Reputation: 11302

You need to append it instead in every loop cycle:

var elem = document.getElementById('wunderNav');
elem.innerHTML = elem.innerHTML + '<a id="wunderNumber'+ counter +'" href="javascript:thisGM.goToGridPage('+ counter + ');">' + counter + '</a>';}

Upvotes: 1

Marc B
Marc B

Reputation: 360772

Assigning to .innerHTML literally replaces the contents of that node. You need to APPEND, e.g.

var w = document.getElementById('wunderNav');
for(...) {
   w.innerHTML += '<a ....></a>';
               ^^-- string concatenation
}

As well, note that the HTML you have in your code snippet is invalid. You start with an <a>, but end with a </span>

Upvotes: 6

Related Questions