I have been experimenting the whole day and not been able to find a solution that feels like respectable code to achieve the following on front end , JS, DOM:
From the container below, class "Task" only; What is the best procedure to get all "id"-values as keys and all values of the attribute "value" as values into an object most suited to be passed into the body of a fetch POST?
<div class="container">
<div class="schedule__container" id="schedule">
<div class="days__container">
<span class="corner"></span>
<div class="day">Monday</div>
<div class="day">Tuesday</div>
<div class="day">Wednesday</div>
<div class="day">Thursday</div>
<div class="day">Friday</div>
<div class="day">Saturday</div>
<div class="day">Sunday</div>
</div>
<div class="part__day">
<span class="time">0:00 - 0:59</span>
<div class="task" id="mo0" value="0"></div>
<div class="task" id="tu0" value="0"></div>
<div class="task" id="we0" value="0"></div>
<div class="task" id="th0" value="0"></div>
<div class="task" id="fr0" value="0"></div>
<div class="task" id="sa0" value="0"></div>
<div class="task" id="su0" value="0"></div>
</div>
<div class="part__day">
<span class="time">1:00 - 1:59</span>
<div class="task" id="mo1" value="0"></div>
<div class="task" id="tu1" value="0"></div>
<div class="task" id="we1" value="0"></div>
<div class="task" id="th1" value="0"></div>
<div class="task" id="fr1" value="0"></div>
<div class="task" id="sa1" value="0"></div>
<div class="task" id="su1" value="0"></div>
</div>
<div class="part__day">
<span class="time">2:00 - 2:59</span>
<div class="task" id="mo2" value="0"></div>
<div class="task" id="tu2" value="0"></div>
<div class="task" id="we2" value="0"></div>
<div class="task" id="th2" value="0"></div>
<div class="task" id="fr2" value="0"></div>
<div class="task" id="sa2" value="0"></div>
<div class="task" id="su2" value="0"></div>
</div>
<div class="part__day">
<span class="time">3:00 - 3:59</span>
<div class="task" id="mo3" value="0"></div>
<div class="task" id="tu3" value="0"></div>
<div class="task" id="we3" value="0"></div>
<div class="task" id="th3" value="0"></div>
<div class="task" id="fr3" value="0"></div>
<div class="task" id="sa3" value="0"></div>
<div class="task" id="su3" value="0"></div>
</div>
<div class="part__day">
<span class="time">4:00 - 4:59</span>
<div class="task" id="mo4" value="0"></div>
<div class="task" id="tu4" value="0"></div>
<div class="task" id="we4" value="0"></div>
<div class="task" id="th4" value="0"></div>
<div class="task" id="fr4" value="0"></div>
<div class="task" id="sa4" value="0"></div>
<div class="task" id="su4" value="0"></div>
</div>
<div class="part__day">
<span class="time">5:00 - 5:59</span>
<div class="task" id="mo5" value="0"></div>
<div class="task" id="tu5" value="0"></div>
<div class="task" id="we5" value="0"></div>
<div class="task" id="th5" value="0"></div>
<div class="task" id="fr5" value="0"></div>
<div class="task" id="sa5" value="0"></div>
<div class="task" id="su5" value="0"></div>
</div>
<div class="part__day">
<span class="time">6:00 - 6:59</span>
<div class="task" id="mo6" value="0"></div>
<div class="task" id="tu6" value="0"></div>
<div class="task" id="we6" value="0"></div>
<div class="task" id="th6" value="0"></div>
<div class="task" id="fr6" value="0"></div>
<div class="task" id="sa6" value="0"></div>
<div class="task" id="su6" value="0"></div>
</div>
</div>I have removed all my messy code attempts and left only the postJSON function to make the situation more readable.
<script>
<% data.forEach(element=> { %>
document.getElementById("<%= element.ttfield %>").addEventListener("click", function() {
mouseClick("<%= element.ttfield %>");
})
<% }) %>
function mouseClick(elementId) {
let elementValue = document.getElementById(elementId).getAttribute("value");
if(elementValue == 0) {
document.getElementById(elementId).style.backgroundColor = "green";
document.getElementById(elementId).setAttribute("value", 1);
} else {
document.getElementById(elementId).style.backgroundColor = "white";
document.getElementById(elementId).setAttribute("value", 0);
}}
async function postJSON(data) {
try {
const response = await fetch("/time-picker", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
const result = await response.json();
console.log("Success:", result);
} catch (error) {
console.error("Error:", error);
}
}
</script>You can select all div elements which have the class task and also have an id attribute and value attribute to build your object using this query selector:
div.task[id][value]
function getTaskData() {
const obj = {};
for (const div of document.querySelectorAll("div.task[id][value]")) {
obj[div.id] = div.getAttribute("value"); // Value as string
// obj[div.id] = Number(div.getAttribute("value")); // Value as number
}
return obj;
}
console.log(getTaskData()); // { "mo0": "0", "tu0": "0", ..., "su6": "0" }<div class="container">
<div class="schedule__container" id="schedule">
<div class="days__container">
<span class="corner"></span>
<div class="day">Monday</div>
<div class="day">Tuesday</div>
<div class="day">Wednesday</div>
<div class="day">Thursday</div>
<div class="day">Friday</div>
<div class="day">Saturday</div>
<div class="day">Sunday</div>
</div>
<div class="part__day">
<span class="time">0:00 - 0:59</span>
<div class="task" id="mo0" value="0"></div>
<div class="task" id="tu0" value="0"></div>
<div class="task" id="we0" value="0"></div>
<div class="task" id="th0" value="0"></div>
<div class="task" id="fr0" value="0"></div>
<div class="task" id="sa0" value="0"></div>
<div class="task" id="su0" value="0"></div>
</div>
<div class="part__day">
<span class="time">1:00 - 1:59</span>
<div class="task" id="mo1" value="0"></div>
<div class="task" id="tu1" value="0"></div>
<div class="task" id="we1" value="0"></div>
<div class="task" id="th1" value="0"></div>
<div class="task" id="fr1" value="0"></div>
<div class="task" id="sa1" value="0"></div>
<div class="task" id="su1" value="0"></div>
</div>
<div class="part__day">
<span class="time">2:00 - 2:59</span>
<div class="task" id="mo2" value="0"></div>
<div class="task" id="tu2" value="0"></div>
<div class="task" id="we2" value="0"></div>
<div class="task" id="th2" value="0"></div>
<div class="task" id="fr2" value="0"></div>
<div class="task" id="sa2" value="0"></div>
<div class="task" id="su2" value="0"></div>
</div>
<div class="part__day">
<span class="time">3:00 - 3:59</span>
<div class="task" id="mo3" value="0"></div>
<div class="task" id="tu3" value="0"></div>
<div class="task" id="we3" value="0"></div>
<div class="task" id="th3" value="0"></div>
<div class="task" id="fr3" value="0"></div>
<div class="task" id="sa3" value="0"></div>
<div class="task" id="su3" value="0"></div>
</div>
<div class="part__day">
<span class="time">4:00 - 4:59</span>
<div class="task" id="mo4" value="0"></div>
<div class="task" id="tu4" value="0"></div>
<div class="task" id="we4" value="0"></div>
<div class="task" id="th4" value="0"></div>
<div class="task" id="fr4" value="0"></div>
<div class="task" id="sa4" value="0"></div>
<div class="task" id="su4" value="0"></div>
</div>
<div class="part__day">
<span class="time">5:00 - 5:59</span>
<div class="task" id="mo5" value="0"></div>
<div class="task" id="tu5" value="0"></div>
<div class="task" id="we5" value="0"></div>
<div class="task" id="th5" value="0"></div>
<div class="task" id="fr5" value="0"></div>
<div class="task" id="sa5" value="0"></div>
<div class="task" id="su5" value="0"></div>
</div>
<div class="part__day">
<span class="time">6:00 - 6:59</span>
<div class="task" id="mo6" value="0"></div>
<div class="task" id="tu6" value="0"></div>
<div class="task" id="we6" value="0"></div>
<div class="task" id="th6" value="0"></div>
<div class="task" id="fr6" value="0"></div>
<div class="task" id="sa6" value="0"></div>
<div class="task" id="su6" value="0"></div>
</div>
</div>
</div>