單擊時如何更改表單元素的背景顏色？

Question

我一直在試圖弄清楚如何在單擊表單元素時更改它的背景顏色。

繼承人的代碼：

<form id="form">

 <input type="text" placeholder="text"/>
<input type="password" placeholder="more text" />

</form>

<script>

</script>

我正在嘗試使其顯示“文本”的表單元素在單擊時變為綠色，而顯示“更多文本”的表單元素在單擊時變為紅色。

我試過這個，但沒有奏效：

<script>
let form = document.queryselector('input type="text"');

form.addEventListener('click', () => {

form.style.backgroundColor = 'green'

});
</script>

我對編碼很陌生，所以非常感謝任何幫助！ 謝謝！

Answer 1

如果您只想讓輸入背景在聚焦時改變顏色。 您可以通過使用 CSS 選擇器來實現此目的。 不需要 JS

input[type=text]:focus {
  background-color: red;
}

或者，如果您希望更改表單背景

form:focus-within {
  background-color:red;
}

Answer 2

問題在於這一行：

let form = document.queryselector('input type="text"');

首先 - querySelector()方法是駝峰式的 - 請注意大寫 S。其次，您的選擇器不太正確 - 您正在尋找： input[type="text"] ：

 let form = document.querySelector('input[type="text"]'); form.addEventListener('click', () => { form.style.backgroundColor = 'green' });

 <form id="form"> <input type="text" placeholder="text"/> <input type="password" placeholder="more text" /> </form>

請注意，一旦你聚焦，這不會改變背景顏色 - 你可能會更好地為focusout ， focusin和可能blur事件添加事件偵聽器 - 但更好的是，你可以使用 CSS：

form input[type="text"]:focus {
  background-color: green;
}

Answer 3

你應該寫('input[type="text"]') ;

<script>
    let form = document.querySelector('input[type="text"]');

    form.addEventListener("click", () => {
      form.style.backgroundColor = "green";
    });
</script>

Answer 4

我建議在您的輸入標簽中添加和 Id 或 css class 然后您可以使用querySelector --> https://www.w3schools.com/jsref/