时间戳

首页 > 解决方案 > 动态表单输入值不更新 Javascript 对象

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

问题描述

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

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

}

标签： javascriptformsobjectkey-value-store

解决方案

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

推荐阅读