I have this HTML script with some JavaScript code for a school project that will receive a house id and how many points a house has (kind of like Harry Potter). The data is being pulled from a few text files by a Flask python script rendering the HTML sites. The data gets over okay, but I want the houses and their points to display when the site loads, and that works, but if I add or remove points, it says NaN. I’ve been working with ChatGPT, but its not really working. Here is my HTML script (sorry its kind of long):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.header-container {
text-align: center;
}
.button-container {
margin-bottom: 20px;
text-align: center;
}
.house-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.house {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
padding: 10px;
border: 1px solid #000000;
border-radius: 4px;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.house-icon {
width: 100px;
height: 100px;
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #000000;
border-radius: 50%;
background-color: #000000;
}
.circle {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.inner-circle {
font-size: 24px;
font-weight: bold;
color: #000000;
}
.house-name {
font-weight: bold;
text-align: center;
margin-bottom: 5px;
}
.button-container-house {
display: flex;
justify-content: space-between;
}
.button {
padding: 5px 10px;
font-size: 14px;
font-weight: bold;
}
.submit-button {
background-color: #4caf50;
color: #fff;
}
.cancel-button {
background-color: #f44336;
color: #fff;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fff;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 300px;
}
.close-button {
color: #888;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.textbox-container {
margin-bottom: 10px;
}
.textbox {
width: 100%;
padding: 5px;
font-size: 14px;
}
.blue-number {
color: blue;
}
</style>
</head>
<body>
<div class="header-container">
<h1>Teacher's Dashboard</h1>
</div>
<div class="button-container">
<button class="button" onclick="createHouse()">Create House</button>
</div>
<div class="house-container" id="houses">
{% for house_id, points in house_points.items() %}
<div class="house" id="{{ house_id }}">
<div class="house-name">{{ house_id }}</div>
<div class="house-icon">
<div class="circle">
<span class="inner-circle">{{ points }}</span>
</div>
</div>
</div>
{% endfor %}
</div>
<div id="modal" class="modal">
<div class="modal-content">
<span class="close-button" onclick="closeModal()">×</span>
<div class="house-name" id="houseName"></div>
<div class="house-icon">
<div class="circle">
<span class="inner-circle"></span>
</div>
</div>
<div class="button-container-house">
<button class="button" onclick="addPoints(1)" data-houseid="{{ house_id }}">+1</button>
<button class="button" onclick="subtractPoints(1)" data-houseid="{{ house_id }}">-1</button>
<button class="button" onclick="addPoints(5)" data-houseid="{{ house_id }}">+5</button>
<button class="button" onclick="subtractPoints(5)" data-houseid="{{ house_id }}">-5</button>
</div>
<div class="textbox-container">
<input type="text" class="textbox" placeholder="Reason">
</div>
<div class="button-container-house">
<button class="button submit-button" onclick="submitPoints()">Submit</button>
<button class="button cancel-button" onclick="cancelPoints()">Cancel</button>
<button class="button remove-button" onclick="removeHouse()">Remove</button>
</div>
<div id="outerNumber"></div>
</div>
</div>
<script>
var savedPoints = {}
var unsavedPoints = {};
// Function to send data to Flask via a POST request
function sendData(url, data) {
fetch(url, {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
if (response.ok) {
// Handle successful response
console.log('Data sent successfully');
} else {
// Handle error response
console.error('Failed to send data:', response.status);
}
})
.catch(error => {
// Handle fetch error
console.error('Error sending data:', error);
});
}
function createHouse() {
var houseName = prompt("Enter the name for the new house:");
if (houseName) {
var houseId = houseName.replace(/s+/g, "-").toLowerCase();
savedPoints[houseId] = 0;
unsavedPoints[houseId] = 0;
var houseContainer = document.getElementById("houses");
var houseDiv = document.createElement("div");
houseDiv.id = houseId;
houseDiv.classList.add("house");
var houseNameDiv = document.createElement("div");
houseNameDiv.classList.add("house-name");
houseNameDiv.textContent = houseName;
houseDiv.appendChild(houseNameDiv);
var houseIconDiv = document.createElement("div");
houseIconDiv.classList.add("house-icon");
var circleDiv = document.createElement("div");
circleDiv.classList.add("circle");
var innerCircleSpan = document.createElement("span");
innerCircleSpan.classList.add("inner-circle");
innerCircleSpan.textContent = savedPoints[houseId];
circleDiv.appendChild(innerCircleSpan);
houseIconDiv.appendChild(circleDiv);
houseDiv.appendChild(houseIconDiv);
houseDiv.addEventListener("click", function() {
openModal(houseId);
});
houseContainer.appendChild(houseDiv);
sendData('/create_house', { 'house_id': houseId });
}
}
function openModal(houseId) {
console.log('Open Modal:', houseId, savedPoints, unsavedPoints);
var modal = document.getElementById("modal");
var houseName = document.getElementById("houseName");
var innerCircle = document.querySelector("#modal .inner-circle");
var textbox = document.querySelector("#modal .textbox");
houseName.textContent = houseId;
modal.dataset.houseId = houseId;
if (unsavedPoints.hasOwnProperty(houseId)) {
var unsavedPointsValue = parseInt(unsavedPoints[houseId]);
console.log("Unsaved Points:", unsavedPointsValue);
innerCircle.textContent = unsavedPointsValue;
} else if (savedPoints.hasOwnProperty(houseId)) {
var savedPointsValue = parseInt(savedPoints[houseId].points);
console.log("Saved Points:", savedPointsValue);
innerCircle.textContent = savedPointsValue;
} else {
innerCircle.textContent = "";
}
textbox.value = "";
modal.style.display = "block";
}
function closeModal() {
var modal = document.getElementById("modal");
modal.style.display = "none";
}
function addPoints(value) {
var modal = document.getElementById("modal");
var houseId = modal.dataset.houseId;
var innerCircle = document.querySelector("#modal .inner-circle");
var points = unsavedPoints.hasOwnProperty(houseId) ? unsavedPoints[houseId] : savedPoints[houseId];
points = parseInt(points) + value;
unsavedPoints[houseId] = points;
innerCircle.textContent = points.toString();
}
function subtractPoints(value) {
var modal = document.getElementById("modal");
var houseId = modal.dataset.houseId;
var innerCircle = document.querySelector("#modal .inner-circle");
var points = unsavedPoints.hasOwnProperty(houseId) ? unsavedPoints[houseId] : savedPoints[houseId];
points = parseInt(points) - value;
unsavedPoints[houseId] = points;
innerCircle.textContent = points.toString();
}
function cancelPoints() {
var modal = document.getElementById("modal");
var houseId = modal.dataset.houseId;
var innerCircle = document.querySelector("#modal .inner-circle");
var points = savedPoints[houseId];
delete unsavedPoints[houseId];
innerCircle.textContent = parseInt(points, 10);
closeModal();
}
function submitPoints() {
var modal = document.getElementById("modal");
var houseId = modal.dataset.houseId;
var data = {
house_id: houseId,
points: Number(unsavedPoints[houseId] || savedPoints[houseId]),
reason: document.querySelector("#modal .textbox").value
};
sendData('/save_house_points', data);
closeModal();
}
function fetchHousePoints() {
fetch('/get_house_points')
.then(response => response.json())
.then(data => {
console.log('Fetched Data:', data);
savedPoints = data;
unsavedPoints = {}; // Reset unsavedPoints
var houseContainer = document.getElementById('houses');
houseContainer.innerHTML = '';
Object.keys(data).forEach((houseId, index) => {
var points = parseInt(data[houseId].points);
var houseDiv = document.createElement('div');
houseDiv.id = houseId;
houseDiv.classList.add('house');
var houseNameDiv = document.createElement('div');
houseNameDiv.classList.add('house-name');
houseNameDiv.textContent = houseId;
houseDiv.appendChild(houseNameDiv);
var houseIconDiv = document.createElement('div');
houseIconDiv.classList.add('house-icon');
var circleDiv = document.createElement('div');
circleDiv.classList.add('circle');
var innerCircleSpan = document.createElement('span');
innerCircleSpan.classList.add('inner-circle');
innerCircleSpan.textContent = points.toString();
circleDiv.appendChild(innerCircleSpan);
houseIconDiv.appendChild(circleDiv);
houseDiv.appendChild(houseIconDiv);
houseDiv.addEventListener('click', function () {
openModal(houseId);
});
houseContainer.appendChild(houseDiv);
});
})
.catch(error => {
console.error('Error fetching house points:', error);
});
}
window.addEventListener('load', fetchHousePoints);
function removeHouse() {
if (confirm("Are you sure you want to remove this house?")) {
var modal = document.getElementById("modal");
var houseId = modal.dataset.houseId;
var formData = new FormData();
formData.append('houseId', houseId);
fetch('/remove_house', {
method: 'POST',
body: formData
}).then(response => {
if (response.ok) {
var house = document.getElementById(houseId).parentNode.parentNode;
house.parentNode.removeChild(house);
delete savedPoints[houseId];
delete unsavedPoints[houseId];
closeModal();
console.log('House removed successfully');
} else {
console.error('Failed to remove house:', response.status);
}
}).catch(error => {
console.error('Error removing house:', error);
});
}
closeModal();
}
function updateHousePoints() {
var houseContainer = document.getElementById("houses");
houseContainer.innerHTML = ""; // Clear the container
Object.entries(savedPoints).forEach(function ([houseId, points]) {
var houseDiv = document.createElement("div");
houseDiv.id = houseId;
houseDiv.classList.add("house");
var houseNameDiv = document.createElement("div");
houseNameDiv.classList.add("house-name");
houseNameDiv.textContent = houseId;
houseDiv.appendChild(houseNameDiv);
var houseIconDiv = document.createElement("div");
houseIconDiv.classList.add("house-icon");
var circleDiv = document.createElement("div");
circleDiv.classList.add("circle");
var innerCircleSpan = document.createElement("span");
innerCircleSpan.classList.add("inner-circle");
innerCircleSpan.textContent = parseInt(points, 10);
circleDiv.appendChild(innerCircleSpan);
houseIconDiv.appendChild(circleDiv);
houseDiv.appendChild(houseIconDiv);
houseDiv.addEventListener("click", function () {
openModal(houseId);
});
houseContainer.appendChild(houseDiv);
});
}
// Fetch house points and update the page on load
window.addEventListener('load', function () {
fetchHousePoints();
})
</script>
</body>
</html>
I was expecting to be able to be able to add and subtract points from the saved houses without error.
