I am trying to bold the only word in the array and none of the numbers. When I use this:
document.getElementById("gradesArray").innerHTML = grades;
It replaces the Grades: completely and just has the array. Knocks that out. I don't know how to either, 1.) allow the Grades: to remain without being affected, or 2.) add Grades: bolded at the beginning of an array without any of the numbers getting affected. Can anyone help? Here is the full code:
<!DOCTYPE html>
<html>
<head>
<style>
.margin {
margin-left: 80px;
}
</style>
</head>
<body>
<br>
<br>
<p class="margin"><b>Got </b></p><input type="number" class="margin" id="iGotThis" name="number">
<p class="margin"><b> out of </b></p><input type="number" class="margin" id="outOfThis" name="number">
<br>
<br>
<input type="submit" id="submit" class="margin" onclick="perFunction()">
<br>
<br>
<p id="gradesArray"><b>Grades: </b></p>
<script>
const multiplier = 10000;
let rounded = 0;
var input = document.getElementById("outOfThis");
var input2 = document.getElementById("iGotThis");
let perMade = 0;
const grades = [];
var arrayList = document.getElementById("gradesArray").innerHTML;
input.addEventListener("keyup", function(event) {
let iGotThis = document.getElementById("iGotThis").value;
let outOfThis = document.getElementById("outOfThis").value;
perMade = iGotThis / outOfThis;
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("submit").click();
}
});
input2.addEventListener("keyup", function(event) {
let iGotThis = document.getElementById("iGotThis").value;
let outOfThis = document.getElementById("outOfThis").value;
perMade = iGotThis / outOfThis;
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("submit").click();
}
});
function perFunction() {
let rounded = Math.round(perMade * multiplier) / 100;
grades.push(arrayList + " " + rounded + "%");
document.getElementById("gradesArray").innerHTML = grades;
documentgetElementById("iGotThis").value = 0;
documentgetElementById("outOfThis").value = 0;
};
</script>
</body>
</html>I would move the bold label out of the gradesArray element.
<b>Grades: </b>
<p id="gradesArray"></p>The 3 big changes were:
document.getElementById("gradesArray").innerHTML = "<b>Grades:</b> " + grades.join(", "); so you can take the array and join all the elements together.documentgetElementById as opposed to document.getElementById.arrayList.<!DOCTYPE html>
<html>
<head>
<style>
.margin {
margin-left: 80px;
}
</style>
</head>
<body>
<br>
<br>
<p class="margin"><b>Got </b></p><input type="number" class="margin" id="iGotThis" name="number">
<p class="margin"><b> out of </b></p><input type="number" class="margin" id="outOfThis" name="number">
<br>
<br>
<input type="submit" id="submit" class="margin" onclick="perFunction()">
<br>
<br>
<p id="gradesArray"><b>Grades: </b></p>
<script>
const multiplier = 10000;
let rounded = 0;
var input = document.getElementById("outOfThis");
var input2 = document.getElementById("iGotThis");
let perMade = 0;
const grades = [];
var arrayList = document.getElementById("gradesArray").innerHTML;
input.addEventListener("keyup", function(event) {
let iGotThis = document.getElementById("iGotThis").value;
let outOfThis = document.getElementById("outOfThis").value;
perMade = iGotThis / outOfThis;
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("submit").click();
}
});
input2.addEventListener("keyup", function(event) {
let iGotThis = document.getElementById("iGotThis").value;
let outOfThis = document.getElementById("outOfThis").value;
perMade = iGotThis / outOfThis;
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("submit").click();
}
});
function perFunction() {
let rounded = Math.round(perMade * multiplier) / 100;
//grades.push(arrayList + " " + rounded + "%");
grades.push(rounded + "%");
document.getElementById("gradesArray").innerHTML = "<b>Grades:</b> " + grades.join(", ");
document.getElementById("iGotThis").value = 0;
document.getElementById("outOfThis").value = 0;
};
</script>
</body>
</html>You can add another span within p and shift your gradesArray id to span instead
<p><b>Grades: </b><span id="gradesArray"></span></p>
<!DOCTYPE html>
<html>
<head>
<style>
.margin {
margin-left: 80px;
}
</style>
</head>
<body>
<br>
<br>
<p class="margin"><b>Got </b></p><input type="number" class="margin" id="iGotThis" name="number">
<p class="margin"><b> out of </b></p><input type="number" class="margin" id="outOfThis" name="number">
<br>
<br>
<input type="submit" id="submit" class="margin" onclick="perFunction()">
<br>
<br>
<p><b>Grades: </b><span id="gradesArray"></span></p>
<script>
const multiplier = 10000;
let rounded = 0;
var input = document.getElementById("outOfThis");
var input2 = document.getElementById("iGotThis");
let perMade = 0;
const grades = [];
var arrayList = document.getElementById("gradesArray").innerHTML;
input.addEventListener("keyup", function(event) {
let iGotThis = document.getElementById("iGotThis").value;
let outOfThis = document.getElementById("outOfThis").value;
perMade = iGotThis / outOfThis;
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("submit").click();
}
});
input2.addEventListener("keyup", function(event) {
let iGotThis = document.getElementById("iGotThis").value;
let outOfThis = document.getElementById("outOfThis").value;
perMade = iGotThis / outOfThis;
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("submit").click();
}
});
function perFunction() {
let rounded = Math.round(perMade * multiplier) / 100;
grades.push(arrayList + " " + rounded + "%");
document.getElementById("gradesArray").innerHTML = grades;
document.getElementById("iGotThis").value = 0;
document.getElementById("outOfThis").value = 0;
};
</script>
</body>
</html>P/s: you have a syntax problem with documentgetElementById. I fixed it for you too