localstorage Как сохранить кнопку

Мне удалось сохранить текст, который находится в поле ввода, но проблема в том, что я не знаю, как сохранить кнопку. Кнопки становятся белыми, когда я нажимаю на них, и цена этого места будет видна в поле ввода. Цена сохраняется, но кнопка не остается белой.localstorage Как сохранить кнопку

<script> 

function changeBlue(element) { 
    var backgroundColor = element.style.background; 
    if (backgroundColor == "white") { 
     element.style.background = "blue"; 
     add(-7.5) 
    } else { 

     element.style.background = "white"; 
     add(7.5) 
    } 

} 

function add(val) { 
var counter = document.getElementById('testInput').value; 
var b = parseFloat(counter,10) + val; 

    if (b < 0) { 
     b = 0; 
    } 

    document.getElementById('testInput').value = b; 
    return b; 

} 


    function save(){ 

    var fieldValue = document.getElementById("testInput").value; 
    localStorage.setItem("text", fieldValue) 
    var buttonStorage = document.getElementsByClass("blauw").value; 
    localStorage.setItem("button", buttonStorage) 

} 

function load(){ 

    var storedValue = localStorage.getItem("text"); 
    if(storedValue){ 

    document.getElementById("testInput").value = storedValue; 

    } 
    var storedButton = localStorage.getItem("button"); 
    if(storedButton){ 

    document.getElementsByClass("blauw").value = storedButton; 

    } 
} 


</script> 

<body onload="load()"> 

<input type="text" id="testInput"/> 
<input type="button" id="testButton" value="Save" onclick="save()"/> 
<input class="blauw" type="button" id="testButton2" value="click me to turn white" 
style="background-color:blue" onclick="changeBlue(this)"> 
<input class="blauw" type="button" id="testButton2" value="click me to turn white"style="background-color:blue" onclick="changeBlue(this)"> 


</body>

Я сделал небольшой образец того, что я хочу сделать. И я не хочу использовать идентификаторы кнопок, потому что у меня есть 500 из них в таблице.

источник

2014-10-23 Cees van den Toren

Так укоротить. Отбросьте бит, который нам не нужен. _Показать тестовый файл_. Не просто опускайте важные вещи, потому что они «слишком длинны». –

Это должно помочь –

Нет, я сказал, укоротить его. Не публикуйте все! –

Это потому, что getElementsByClass (это getElementsByClassName кстати) возвращает список узла всех элементов этого класса.

Чтобы сделать его работу, вам нужно пройти через все элементы в списке, используя for-loop, и установить значение каждого отдельного элемента в значение localStorage.

Смотрите эти ссылки для получения дополнительной информации:
Link 1
Link 2

Очень маленький макет, чтобы дать вам идею:

(В JS, я положил в комментарии строки кода, которые вы использовали бы для своей ситуации.)

function changeValues() { 
 
    var list = document.getElementsByClassName("child"); //var list = document.getElementsByClassName("blauw"); 
 

 
    for (var i=0; i<list.length; i++) { 
 
    list[i].innerHTML = "Milk"; //list[i].value = storedButton; 
 
    } 
 
}

<ul class="example"> 
 
    <li class="child">Coffee</li> 
 
    <li class="child">Tea</li> 
 
</ul> 
 

 
<p>Click the button to change the text of the first list item (index 0).</p> 
 

 
<button onclick="changeValues()">Try it</button>

источник

2014-10-23 18:10:38 myfunkyside

Я не знаю, t понять, что означает u –

@CeesvandenToren - Добавлены некоторые ссылки и фрагмент кода – myfunkyside

Но как выглядит localStorage.setItem()? –

localstorage Как сохранить кнопку

ответ

Смежные вопросы