How do I allow a bold element to remain at the start of a string and add an array?

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>

>Solution :

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

Leave a Reply