Использование HTML5 localstorage для обновления текста без document.write - PullRequest
Новая
       6

Использование HTML5 localstorage для обновления текста без document.write

0 голосов
/ 16 января 2012

У меня есть div с классом 'card', который также можно перетаскивать () с помощью jQuery.Я использую localstorage для хранения массива, содержащего информацию о карте. 

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);
}

В html: 

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

После перетаскивания карты, при отпускании мыши, document.writeвызывает обновление всей страницы, и отображаются только данные в document.write.Как я могу вставить данные на карту без использования document.write?

Я думаю, что мне нужно использовать манипуляции с DOM, но я немного застрял на том, как именно.

1 Ответ

1 голос
/ 16 января 2012

Вы не можете использовать document.write после завершения загрузки документа, используйте innerHTML ypu также может использовать jQuery .append

...