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

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。并使用该 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;
 }