I have been trying to run this code for two hours and have always got the same error, i.e., no output but when i preview it before publishing is all good and working fine. I am using the generate theme plugin for my wordpress site i have provided the code below.
code:
<!DOCTYPE html>
<html>
<head>
<title>Average Grade Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #333;
}
#inputForm {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
border-radius: 10px;
border: 2px solid #333;
}
table {
width: 100%;
margin-bottom: 10px;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: center;
}
th {
background-color: #333;
color: #fff;
}
input[type="number"] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
display: block;
margin: 0 auto;
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #555;
}
#resultBox {
border: 2px solid #333;
padding: 10px;
text-align: center;
margin-top: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Average Grade Calculator</h1>
<form id="inputForm">
<table>
<tr>
<th>Grade</th>
<th>Weight</th>
</tr>
<!-- Input fields for grade and weight -->
<tr>
<td><input type="number" id="grade1" step="0.01" placeholder="Assignment Grade"></td>
<td><input type="number" id="weight1" placeholder="Assignment Weight"></td>
</tr>
</table>
<button type="button" onclick="addInputRow()">Add Row</button>
<button type="button" onclick="calculateAverageGrade()">Calculate</button>
</form>
<div id="resultBox">
<p id="result"></p>
</div>
<script>
let rowCount = 1;
function addInputRow() {
rowCount++;
const table = document.querySelector('table');
const newRow = table.insertRow(-1);
const gradeCell = newRow.insertCell(0);
gradeCell.innerHTML = `<input type="number" id="grade${rowCount}" step="0.01" placeholder="Assignment Grade">`;
const weightCell = newRow.insertCell(1);
weightCell.innerHTML = `<input type="number" id="weight${rowCount}" placeholder="Assignment Weight">`;
}
function calculateAverageGrade() {
// Initialize variables to store the sum of (Grade * Weight) and the sum of weights.
let sumGradeWeight = 0;
let sumWeights = 0;
// Loop through each grade and weight input and calculate the sums.
for (let i = 1; i <= rowCount; i++) {
const grade = parseFloat(document.getElementById(`grade${i}`).value);
const weight = parseFloat(document.getElementById(`weight${i}`).value);
// Check if the grade and weight are valid numbers.
if (!isNaN(grade) && !isNaN(weight)) {
sumGradeWeight += grade * weight;
sumWeights += weight;
}
}
// Calculate the average grade.
if (sumWeights !== 0) {
const averageGrade = sumGradeWeight / sumWeights;
// Display the result.
document.getElementById("result").innerHTML = `Average Grade: ${averageGrade.toFixed(2)}`;
} else {
// Handle the case where the sum of weights is zero.
document.getElementById("result").innerHTML = "Please enter valid grade and weight values.";
}
}
</script>
</body>
</html>
I want someone to solve my query immediately, please.
2
Answers
Do you try to add async and defer to your script balise like that:
<script async defer>your javascript code here</script>maybe you should check the eventlisteners