gpt4 book ai didi

javascript - localstorage如何保存按钮

转载 作者:行者123 更新时间:2023-11-28 07:53:08 24 4
gpt4 key购买 nike

我设法保存输入字段中的文本,但问题是我不知道如何保存按钮。当我点击按钮时,按钮会变成白色,并且该座位的价格将在输入字段中可见。价格节省了,但按钮不会保持白色。

<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 个按钮。

最佳答案

这是因为 getElementsByClass(顺便说一句,它是 getElementsByClassName)返回具有该类的所有元素的节点列表

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

请参阅以下链接了解更多信息:
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>

关于javascript - localstorage如何保存按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26532054/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com