动态表单输入值不更新 Javascript 对象

Question

这里有新的编码器。我花了一周的时间试图让这个工作，真的需要帮助。我有一个带有一个输入字段的表单。我可以查询它并获取新的名称值。

问题是当我在对象文字键/值对中使用相同的查询时，当您更改值时它不会显示更新的值。它仅在我 console.log 时显示原始值。任何帮助将不胜感激。

HTML

<form id="nameForm" class="nameForm" action="#">

<label id="nameLabel" for="nameInput">Enter Your Name:</label>

<input type="text" id="nameInput" class="nameInput" required>

<button id="next" type="button">Next</button>
</form>

JavaScript

let salonOwner = {

name: document.querySelector(#nameInput).value

}

Answer 1

您的按钮需要一个 onclick 事件，它调用您的新功能更新。所以每次按下你的对象都会更新。

<form id="nameForm" class="nameForm" action="#">
    <label id="nameLabel" for="nameInput">Enter Your Name:</label>
    <input type="text" id="nameInput" class="nameInput" required>
    <button id="next" type="button" onclick="update();">Next</button>
</form>

<script>
    function update() {
        let salonOwner = {
            name: document.querySelector("#nameInput").value
        }
        console.log(salonOwner);
    }
</script>

Answer 2

所以基本上 javascript 文件只运行一次，所以您需要添加 EventListener 以在您提交表单并通过它更新 salonOwner 时进行监听

<form id="nameForm" class="nameForm" action="#">

    <label id="nameLabel" for="nameInput">Enter Your Name:</label>
    
    <input type="text" id="nameInput" class="nameInput" required>
    
    <button id="next" type="submit">Next</button>
</form>

let salonOwner = {
  name: ""
}

//Initilize Dom Element
let form = document.querySelector("#nameForm")


//Add EventListener to Update The salonOwner Object
form.addEventListener("submit" , (e)=>{
  let name = document.querySelector("#nameInput").value;
  salonOwner.name = name;
})