I have five variables each contain an editable div element .. I want to create an object with five properties then assign these properties to the innerText of the five variables ..
let firstName = document.querySelector(".firstName").innerHTML
let secondName = document.querySelector(".secondName").innerHTML
let marsName = document.querySelector(".marsName").innerHTML
let email = document.querySelector(".phoneOrEmail").innerHTML
let password = document.querySelector(".password").innerHTML
let All_is_well = document.querySelector(".allIsWell");
All_is_well.addEventListener("click", () => {
let form = {
firstName,
secondName,
marsName,
email,
password,
}
fetch(
"http:localhost:5000/api/register",
{
method: "POST",
body: JSON.stringify(form),
headers: { "Content-Type": "application/json" },
cache: 'no-cache'
}
)
.then(res.json())
.then((data) => {
// Handle response
console.log("Success: ", res);
})
.catch((error) => {
// Handle error
console.log("Error: ", error);
});
console.log(form);
});<form>
<div class="comment"> install your landed spaceship on mars </div>
<div class="firstName" contenteditable="true" spellcheck="false"> </div>
<div class="secondName" contenteditable="true" spellcheck="false"> </div>
<div class="marsName" contenteditable="true" spellcheck="false"> </div>
<div class="phoneOrEmail" contenteditable="true" spellcheck="false"> </div>
<div class="password" contenteditable="true" spellcheck="false"> </div>
<button type="submit" class="allIsWell"> All is Well </button>
</form>when I print the object in the console, each property is assigned a value " ".
Does your divs got the right classes ?
Please make sure you're saving values after editing the divs.
For example, by clicking on a "Save" button.
document.getElementById("save").addEventListener("click", () => {
let first = document.querySelector(".element1").innerText;
let second = document.querySelector(".element2").innerText;
let third = document.querySelector(".element3").innerText;
let props = {};
props.first = first;
props.second = second;
props.third = third;
console.log(props); // returns the right values for me
});