Cada vez que este sitio se carga, obtiene información en una base de datos, suma todo y lo agrega en un div '#total'. Estoy tratando de actualizar el valor cada vez que se envía una nueva entrada. Pensé que, dado que el envío ocurriría después de que se cargara el sitio, si intentaba obtener el valor '#total' al enviar, ya estaría definido, pero si intento consolarlo. Iniciar sesión, dice que no está definido.

¿Cómo podría usar el valor '#total' después de agregarle la suma?

 const route = 'http://localhost:3000'; const tot = document.getElementById('total'); serverInteraction(route).then((data) => { data.forEach((T, i) => { arr[i]= parseFloat(arr[i]); console.log(T.Value); }); var total = arr.reduce((sum, n) => sum + n); return total; }).then(total => appendTotal(total)); function handleSubmit(event) { event.preventDefault(); const currentTime = new Date(); const newContent = {valor: valor.value, produto: produto.value, date: currentTime.toDateString(), time: `${currentTime.getHours()}:${currentTime.getMinutes()}`}; serverInteraction(route, 'POST', newContent); const total = document.getElementById('total'); const inputValue = parseFloat(valor.value); total.innerText = (total.value + inputValue); console.log(total.value); } async function serverInteraction(route, method = 'GET', content = null) { if (content) content = JSON.stringify(content); const response = await fetch(route, { method: method, body: content, headers: {"Content-type": "application/json"} }) return response.json(); } function appendTotal(aTotal) { tot.append(aTotal); }