背景颜色不会永久变化

Question

我点击按钮时尝试更改背景颜色。但是，单击该按钮时，它会改变颜色一秒钟，然后返回到页面开头设置的原始颜色。

如何永久设置颜色？

使用Javascript：

function setbackground(color)
{
  document.body.style.backgroundColor = color;
}

HTML：

<input id="bigbutton" type="submit" value=""
  style="background: url(moods/rocking.png) no-repeat center" 
  onclick="setbackground('#B84DB8')"/>

Answer 1

更改DOM会更改当前页面。

单击提交按钮将提交其所在的表单。

提交表单将从服务器加载一个新的（尽管可能相同）页面（它不会保留本地DOM更改）。

因此，您正在更改当前页面，然后立即将其丢弃并加载一个干净的页面。

根据您想要达到的目标，您可以：

• 使用JavaScript阻止提交表单（如果您使用onclick属性，则通常的方式是return false，但我们更喜欢addEventListener到onclick属性这些日子）​​。如果您打算无条件地执行此操作，您可能会首先询问为什么使用提交按钮（而不是常规按钮）（尽管progressive enhancement很酷）。
• 使用提交按钮的名称/值使服务器生成不同的HTML文档（使用您想要的颜色）而不是使用JS
• 在本地存储有关颜色更改的数据（例如，在cookie或localStorage中），并在文档加载并重复更改时让JS读取该数据。

来自评论：

  

叶氏。我需要提交一份表格然后更改bg颜色

然后第一个选项不能使用（除非你也使Ajax的问题​​复杂化）。

使用服务器端代码进行更改将是最不具侵入性的方法。