Question

尝试根据我在文本框中写的内容更改文本的文本颜色和背景颜色。似乎工作简短;它向我展示了一瞬间的颜色，就像一个快速的按扣，就是它。

<!DOCTYPE html>
<html>
<head>
    <title>Prelab5 Ex1</title>
    <style>
    </style>
</head>

<body>
<h2>Prelab5 Ex1</h2>
<form method="post">
    <input type="text" name="background" id="background"/><input type="submit" value="Background" onclick="changeBack();"/>
    <br/>
    <input type="text" name="text" id="text"/><input type="submit" onclick="changeText();" value="Text"/>
    <br/>
    <div id="content">Some text</div>
</form> 

<script>
var DivText = document.getElementById("content");
function changeBack(){
    var backColor = (document.getElementById("background").value);
    DivText.style.backgroundColor= backColor;
}

function changeText(){
    var textColor = (document.getElementById("text").value);
    DivText.style.color = textColor;
}

</script>
</body>
</html>

Answer 1

您提交按钮的onclick处理程序不会return false，因此您的表单会重新提交页面。您可以添加return false之类的

var DivText = document.getElementById("content");

function changeBack() {
  var backColor = (document.getElementById("background").value);
  DivText.style.backgroundColor = backColor;
}

function changeText() {
  var textColor = (document.getElementById("text").value);
  DivText.style.color = textColor;
}

<!DOCTYPE html>
<html>
<head>
  <title>Prelab5 Ex1</title>
</head>
<body>
  <h2>Prelab5 Ex1</h2>
  <form method="post">
    <input type="text" name="background" id="background" />
    <input type="submit" value="Background" onclick="changeBack(); return false" />
    <br/>
    <input type="text" name="text" id="text" />
    <input type="submit" onclick="changeText(); return false" value="Text" />
    <br/>
    <div id="content">Some text</div>
  </form>
</body>
</html>

Answer 2

您的“提交”输入会对表单执行操作，该操作当前设置为“发布”。这会将表单发布到同一页面（并导致刷新）。

您可以通过将return false;添加到所有input type= "submit"元素的ONCLICK属性来覆盖默认功能。

换句话说，这个：

需要成为这个：

<input type="submit" onclick="changeText();" value="Text"/>

但为什么要使用输入类型=提交？

您可以轻松使用没有表单的链接或按钮：

<a href="#" onclick="changeText();"/>Test</a>

或点击我！

将执行相同的操作，而无需覆盖论坛操作：）

通过JavaScript更改文本/背景颜色会立即更改

2 个答案: