Question

当用户使用

点击文本框时，我需要更改它的背景颜色

HTML：

<input id="inpucountry" type="text" size="50" placeholder="country" style="border:1px solid #0F0" onclick="changecolor('#inpucountry','#ff0304')" /> <br /><br />
<input id="inpucity" type="text" size="50" placeholder="city" style="border:1px solid #0F0" onclick="changecolor('#inpucity','#a4d871')" /> <br /><br />
<input id="inpuloc" type="text" size="50" placeholder="location"  style="border:1px solid #0F0"  onclick="changecolor('#inpuloc','#ff97aa')" /> <br /><br />

使用Javascript：

function changecolor(tb, bgc) {
    document.getElementById("tb").style.backgroundColor = bgc;
    //document.getElementById("inpucountry").style.backgroundColor = "yellow";
}

Answer 1

你的身份错误！并且没有使用 id

在ID之前取出#，只需传递文本框的实际ID即可。并将该id用作 getElementById 的参数，而不是字符串。

您的HTML代码应为

 <input id="inpucountry" type="text" size="50" placeholder="country" style="border:1px solid #0F0" onclick="changecolor('inpucountry','#ff0304')" /> <br /><br />
  <input id="inpucity" type="text" size="50" placeholder="city" style="border:1px solid #0F0" onclick="changecolor('inpucity','#a4d871')" /> <br /><br />
 <input id="inpuloc" type="text" size="50" placeholder="location"  style="border:1px solid #0F0"  onclick="changecolor('inpuloc','#ff97aa')" /> <br /><br />

Js代码应该是

document.getElementById(tb).style.backgroundColor = bgc; //note that "tb" is replaced by tb

实际上你甚至不需要传递id，只需将引用传递给当前对象

 <input id="inpucountry" type="text" size="50" placeholder="country" style="border:1px solid #0F0" onclick="changecolor(this,'#ff0304')" /> <br /><br />

 function changecolor( thisObj, bgc )
 {
     thisObj.style.backgroundColor = bgc;
 }

Answer 2

传递id不应被接受为字符串..删除"（引号）并从#传递的参数中删除inline-function，因为您没有使用{{ 3}}可以使用CSS选择器选择元素..

  function changecolor(tb, bgc) {
    document.getElementById(tb).style.backgroundColor = bgc;
  }

<input id="inpucountry" type="text" size="50" placeholder="country" style="border:1px solid #0F0" onclick="changecolor('inpucountry','#ff0304')" />
<br />
<br />
<input id="inpucity" type="text" size="50" placeholder="city" style="border:1px solid #0F0" onclick="changecolor('inpucity','#a4d871')" />
<br />
<br />
<input id="inpuloc" type="text" size="50" placeholder="location" style="border:1px solid #0F0" onclick="changecolor('inpuloc','#ff97aa')" />
<br />
<br />

Answer 3

由于document.getElementById("tb")是一个变量，而不是tb，您应该编写document.getElementById(tb)而不使用引号，考虑tb包含元素＆＃39; s {{1在开头没有id。

无法更改文本框的背景颜色

3 个答案: