Question

我无法根据用户输入更改页面的背景颜色。我已经用HTML格式写了一个表格来询问这个人的姓名和他们的年龄。我有一个内联脚本（只是因为我想看看是否有任何更改使它工作）但我似乎无法做任何事情。我知道这是超级基本的，但任何帮助将不胜感激。

<form name="frmNameAge" id="frmNameAge" method="get" action="">

<table id="formTable">

<tr>
    <td>Name:</td>
    <td><input type="text" max="50" name="txtName" id="name" />

    </td>
</tr>

<tr>
    <td>Age:</td>
    <td><input type="text" max="10" name="txtAge" id="age" /></td>

<tr>
    <td colspan="2"><hr></td>
</tr>

<tr>
    <td align="center" colspan="2"><input type="button" name="btnSubmit"    value="Submit" id="button"></td>
</tr>

</table>

</form>     

</div>
<script>

document.getElementById("button").onclick = function () {
var strColor = prompt("Enter your favorite color.");

}

function changeBackgroundColor(strColor) {
document.body.style.backgroundColor = strColor;
}



</script>

Answer 1

您忘记调用更改颜色的函数，因此您从未传递过从提示中收到的值

document.getElementById("button").onclick = function () {
    var strColor = prompt("Enter your favorite color.");
    changeBackgroundColor(strColor);
}

Answer 2

我相信你的问题始于范围。

要解决此问题，请将变量var strColor设为全局变量，或者继续将变量设为私有，并将值传递给changeBackgroundColor函数。

//global variable solution

var strColor;
document.getElementById("button").onclick = function () {
  strColor = prompt("Enter your favorite color.");
}

function changeBackgroundColor(strColor) {
document.body.style.backgroundColor = strColor;
}

//Private variable 

document.getElementById("button").onclick = function () {
    var strColor = prompt("Enter your favorite color.");
    changeBackgroundColor(strColor);
}

如果您想了解更多内容，我建议您在闲暇时间阅读本教程。

链接 - http://www.w3schools.com/js/js_function_closures.asp

Answer 3

在你的代码中，你没有调用＆＃34; changeBackgroundColor＆＃34;在提示符确定单击。

这是小提琴：https://jsfiddle.net/swaprks/1cL03mxb/

<强> HTML：

<form name="frmNameAge" id="frmNameAge" method="get" action="">

<table id="formTable">

<tr>
    <td>Name:</td>
    <td><input type="text" max="50" name="txtName" id="name" />

    </td>
</tr>

<tr>
    <td>Age:</td>
    <td><input type="text" max="10" name="txtAge" id="age" /></td>
    <tr>
    <td colspan="2"><hr></td>
</tr>

<tr>
    <td align="center" colspan="2"><input type="button" name="btnSubmit"    value="Submit" id="button"></td>
</tr>

</table>

</form>

<强> JAVASCRIPT：

document.getElementById("button").onclick = function () {
  var strColor = prompt("Enter your favorite color.");
  if ( strColor != null) {
    changeBackgroundColor(strColor)
  }

}

function changeBackgroundColor(strColor) {
  document.body.style.background = strColor;
}

页面背景不会改变.onclick ??

3 个答案: