Question

I have a div with a class of ‘card’, which is also draggable() with jQuery. I’m using localstorage to store an array containing information about the card.

var cardID = 1;
var cardValues = new Array();
var name = "Shifting Sliver";
var cost = "3U";
var text = "Sliver cannot be blocked except by slivers.";
var power = "2";
var toughness = "2";

cardValues.push(name);
cardValues.push(cost);
cardValues.push(text);
cardValues.push(power);
cardValues.push(toughness);

localStorage.setItem(cardID, cardValues.join(";"));


var cardKey = localStorage.key(0);
var getCardValues = localStorage.getItem(cardKey);
values = getCardValues.split(";");
var name = values[0];
var cost = values[1];
var text = values[2];
var power = values[3];
var toughness = values[4];

function writeCard()
{
    document.write('Card Name: ' + name + '<br />');
    document.write('Card Cost: ' + cost + '<br />');
    document.write('Card Text: ' + text + '<br />');
    document.write('Card Power: ' + power + '<br />');
    document.write('Card Toughness: ' + toughness);
}

In the html:

<div class="card">
    <div class="info"><script type='text/javascript'> writeCard(); </script></div>
</div>

After dragging the card, when releasing the mouse, document.write causes the whole page to refresh and only the data in document.write is shown. How can I insert the data onto the card without using document.write?

I think I need to use DOM manipulation, but I’m a bit stuck on exactly how.

Answer 1

You can not use document.write when document is completed loading use innerHTML instead
ypu can also use jQuery .append