如何解决错误类型错误：无法设置<HTMLInputElement>只有getter的#的属性列表？

Question

我是javascript的新手，尝试构建一个文件上传，用户可以在其中上传文件或从下拉列表中选择文件或输入文件路径。

一切都很好，直到我尝试创建一个列表"car"，在输入元素中提供两个示例选择选项。

FileUpLoad (input_def) {
input_def.id = this.uid()
const Label = document.createElement('label')
Label.className = 'custom_file_upload'
const Input = document.createElement('input')
Input.type = 'file'
const Input1 = document.createElement('input')
Input1.type = 'text'
Input1.list = 'car'
const DataList = document.createElement('datalist')
DataList.id = 'car'
const Option1 = document.createElement('option')
Option1.textContent = 'Volvo'
DataList.append(Option1)
const Option2 = document.createElement('option')
Option2.textContent = 'Suzuki'
DataList.append(Option2)
Label.append(Input)
Label.append(Input1)
Label.append(DataList)
const Li = document.createElement('i')
Li.innerText = ' Upload Data'
Li.className = "fa fa-cloud-upload"
Label.append(Li)
const row = document.createElement('div')
row.className = 'ui-form-element section-row'
row.id = input_def.id
row.append(Label)
return row

}

如何解决此错误？

TypeError: Cannot set property list of #<HTMLInputElement> which has only a getter

我试图遵循这个解决方案。

HTML选择表单，可选择输入自定义值

感谢

Answer 1

这是因为；列表"；属性是只读的，因此您需要使用setAttribute函数来设置/更改它。

试试这个：

const Input1 = document.createElement('input')
Input1.type = 'text'
Input1.setAttribute("list","car")

Answer 2

用下面的行替换Input1.list = 'car'，因为list属性是只读的，并且实际上返回对DOM元素的引用，所以需要使用setAttribute来设置列表属性。

Input1.setAttribute('list', 'cars');