为动态更改id的输入字段赋值

Question

我想给一个输入字段赋值，它会动态地改变它的id。该字段如下所示。

<input aria-autocomplete="list" aria-labelledby="downshift-5-label" autocomplete="off" id="downshift-5-input" placeholder="Enter agent name" class="css-1u5bp1w etr7mik2" value="">

我的要求是为这个字段赋值。我已经尝试了下面的方法。它显示出现在UI中的值，但不会在上面的value="“字段中赋值。

document.querySelector('*[placeholder="Enter agent name"]').value = "bf5a4";

有什么方法可以给这个字段赋值吗？

Answer 1

HTML元素在属性和属性之间有区别。

简而言之，每当你在javascript element.xyz中这样做的时候，你访问的是一个名为xyz的属性，而不是属性。

但是，当您检查HTML <>标记时，您查看的是属性。因此，您的代码正确地设置了value属性，但是您不会看到<input... value="bf5a4">，因为您还没有设置value属性。

如果您确实想要设置该属性，则必须显式调用setAttribute (mdn)，例如：

​

let el = document.querySelector('*[placeholder="Enter agent name"]');

el.value = 'bf5a4-property'; // sets property
el.setAttribute('value', 'bf5a4-attribute'); // sets attribute (// <input... value="bf5a4-attribute">)

<input aria-autocomplete="list" aria-labelledby="downshift-5-label"
       autocomplete="off" id="downshift-5-input" placeholder="Enter agent name"
       class="css-1u5bp1w etr7mik2" value="">

​