Question

我设法保存输入字段中的文本，但问题是我不知道如何保存按钮。单击它们时按钮变为白色，并且输入字段中将显示该座位的价格。价格节省，但按钮不会保持白色。

<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>

我做了一个我想做的小样本。我不想使用按钮的Id，因为我在桌子上有500个。

Answer 1

那是因为getElementsByClass（它的getElementsByClassName btw）会返回该类所有元素的节点列表。

要使其工作，您需要使用for循环遍历列表中的所有项目，并将每个单独元素的值设置为localStorage-value。

有关详细信息，请参阅以下链接：
Link 1
Link 2

很小的模型可以给你一个想法：

（在JS中，我在评论中列出了您将根据自己的情况使用的代码行。）

＆＃13;

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

＆＃13;

<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>

＆＃13;

localstorage如何保存按钮

1 个答案: