我遇到的问题是我无法更改变量的元素。
我尝试了很多不同的方法，但我很难从 HTML 中获取输入并更改 JS 变量。
我正在制作的东西将来会包括一个随机字符生成器，因此如果这是正确的方法，则更改变量的部分是关键。
我一直在 Javascript 中使用这样的变量：
let Player = {
name: "Alex",
age: 20,
Height: 190,
};
我遇到的问题是我无法更改变量的元素。我一直在尝试的方式是：
document.getElementById("PlayerNameInput").innerHTML = Player.name
获得相同结果的任何替代方法和/或更好的方法？需要多次更改变量属性。
读取input元素的value属性并将对象的属性更改为它的值。
如果将输入的name设置为对象中的属性相同，事情将会非常顺利：
在你的html中：
<body>
<input placeholder="First name" type="text" name="firstName"><br>
<input placeholder="Last name" type="text" name="lastName"><br>
<input placeholder="Hobby" type="text" name="hobby">
<script src="changeObjFromInput.js"></script>
</body>
在你的scriptchangeObjFromInputjs：
let person = {
firstName: '',
lastName: '',
hobby: ''
}
document.addEventListener('keyup', e => {
let input = e.target.closest('input');
if (!input) { return; }
person[input.name] = input.value;
console.log(person);
});
编辑： 或者你的意思是相反，从对象到输入字段，我们也可以这样做，value 既可读又可写：
let person = {
firstName: 'John',
lastName: 'Doe',
hobby: 'fishing'
}
for (let key in person) {
document.querySelector(`input[name=${key}]`).value = person[key];
}
document.addEventListener('keyup', e => {
let input = e.target.closest('input');
if (!input) { return; }
person[input.name] = input.value;
console.log(person);
});
也许你的意思是这样的。代码
innerHTML.innerHTML = "<div>New Elm</div>"let Player = {
name: "Alex",
age: 20,
Height: 190,
};
// get value from `html`
Player.name = document.getElementById("PlayerNameInput").value
// set new value to `html`
document.getElementById("PlayerNameInput").value = Player.name
console.log(Player)<input id="PlayerNameInput" value="John">