Estoy tratando de poner en negrita la única palabra en la matriz y ninguno de los números. Cuando uso esto:
document.getElementById("gradesArray").innerHTML = grades; Reemplaza los Grades: completamente y solo tiene la matriz. Noquea eso. No sé cómo 1.) permitir que Grades: permanezca sin verse afectado, o 2.) agregar Grades: en negrita al comienzo de una matriz sin que ninguno de los números se vea afectado. ¿Alguien puede ayudar? Aquí está el código completo:
<!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>Quitaría la etiqueta en negrita del elemento gradesArray .
<b>Grades: </b> <p id="gradesArray"></p>Los 3 grandes cambios fueron:
document.getElementById("gradesArray").innerHTML = "<b>Grades:</b> " + grades.join(", "); para que pueda tomar la matriz y unir todos los elementos.documentgetElementById en lugar de 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>Puede agregar otro span dentro de p y cambiar su id de gradesArray a span en su lugar
<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: tiene un problema de sintaxis con documentgetElementById . yo también te lo arreglé