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

Question

这里是新程序员。我花了一个星期的时间试图让它工作并且真的需要帮助。我有一个带有一个输入字段的表单。我可以查询它并获取新的名称值。

问题是当我在对象文字 key/value 对中使用相同的查询时，它不会在您更改值时显示更新的值。它只在我 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

所以基本上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;
})

Answer 2

您的按钮需要一个 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>

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

Dynamic Form Input Value not updating Javascript Object

javascript

forms

object

key-value-store