Want to use js to add rows onclick

Question

I have this code below that pulls up FX data from the Visa website. Each time you tap on a date, it adds another row.

But adding a row seems to cause a reload/refresh of all the iframes ... why? How do I prevent that?

(You can see it live at http://zinclabs.com/eur2)

<body>
<script>

var date = new Date();

function format(date) {
    var mm = date.getUTCMonth() + 1;
    var dd = date.getUTCDate();
    var yy = date.getUTCFullYear();
    return mm + '/' + dd + '/' + yy;
}

function addrow(){
    var d = format(date);
    document.body.innerHTML +='<div class="row"><div class="date" onclick="addrow()">'+d+'</div><div class="rate"><iframe scrolling="no" src="http://usa.visa.com/support/consumer/travel-support/exchange-rate-calculator.html/?fromCurr=USD&toCurr=EUR&fee=0&exchangedate=' + d + '"></iframe></div></div>';
    date.setDate(date.getDate() - 1);
}

addrow();

</script>
</body>

Take a look at http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false — JCOC611, Dec 02 '15 at 22:41
@JCOC611 Um ... sorry, that's all greek to me. What am I looking at? — Dan, Dec 02 '15 at 22:45

score 0 · Accepted Answer · answered Dec 02 '15 at 22:50

Adding text to an object's innerHTML causes a complete refresh of the object – in this case document.body. Therefore, all the iframes within it will be reloaded.

Instead, you could create a new DIV element, and append it as a child of document.body:

function addrow(){
  var d = format(date);
  var newRow= document.createElement('div');
  newRow.innerHTML= '<div class="row"><div class="date" onclick="addrow()">'+d+'</div><div class="rate"><iframe scrolling="no" src="http://usa.visa.com/support/consumer/travel-support/exchange-rate-calculator.html/?fromCurr=USD&toCurr=EUR&fee=0&exchangedate=' + d + '"></iframe></div></div>';
  document.body.appendChild(newRow);
  date.setDate(date.getDate() - 1);
}

Want to use js to add rows onclick

1 Answers1