javascript - 无法在加载页面期间更改表单子(monad)元素的边框颜色

Question

window.onload{
var form = document.getElementById("contact").childNodes;
for (let i=0; i<form.length;i++){
    form[i].style.border = "2px solid red";
}
}

<form id="contact">
<p>Votre nom :                  </p><input type="text"><br />
<p>Votre Prénom :               </p><input type="text"><br />
<p>Votre e-mail :               </p><input type="email"><br />
<p>Votre numéro de téléphone :  </p><input type="tel"><br />
<p>Décrivez votre projet :      </p><textarea></textarea><br />
<p>                             </p><input type="submit" id="bouton_valider" value="Valider" />
</form>

我正在尝试更改表单的每个子元素的边框颜色。但它不起作用，我不明白为什么。

Answer 1

我相信您正在尝试做的是将所有输入元素突出显示为红色。

您的代码存在以下错误:

1. window.onload 的语法不正确，它是一个函数。
   阅读更多:https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
2. 语句:var form = document.getElementById("contact").childNodes; 将为您提供所有子节点，而不仅仅是您要设置边框的节点。这基本上是一个包含所有节点值的 NodeList 数组，这些节点可能是元素或文本节点。
   引用:https://javascript.info/basic-dom-node-properties

我已经修复了你的代码，这里是工作片段。
希望这会有所帮助:)

window.onload = function() {
  var form = document.getElementById("contact");
  var inputList = form.getElementsByTagName('input')
  for (let i = 0; i < inputList.length; i++) {
    form[i].style.border = "2px solid red";
  }
}

<form id="contact">
  <p>Votre nom :                  </p><input type="text"><br />
  <p>Votre Prénom :               </p><input type="text"><br />
  <p>Votre e-mail :               </p><input type="email"><br />
  <p>Votre numéro de téléphone :  </p><input type="tel"><br />
  <p>Décrivez votre projet :      </p><textarea></textarea><br />
  <p>                             </p><input type="submit" id="bouton_valider" value="Valider" />
</form>