动态表单输入值未更新 Javascript Object

Question

new coder here. I've spent a week trying to get this to work and really need help. I have a form with one input field. I can query it and get the new name values.

Problem is when I use the same query in a object literal key/value pair, it doesnt show the updated values when you change the values. It only shows the original values when I console.log. Any help would be greatly appreciated.

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

So basically javascript file run only once so you need to add EventListener to listen when you submit the form and update salonOwner through it

<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

You need for your button an onclick-event, which calls your new function update. So everytime it is pressed your object will be updated.

<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>