無法更改文本框的背景顏色

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;
 }

Answer 2

傳遞的id不應作為字符串接受。.由於您未使用querySelector （可以使用CSS選擇器選擇元素），因此請從inline-function從傳遞的參數中刪除" （引號）並從其中刪除# 。

  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包含元素的id沒有#開頭。