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

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 ><b>Got </b></p><input type="number"  id="iGotThis" name="number">
  <p ><b> out of </b></p><input type="number"  id="outOfThis" name="number">
  <br>
  <br>
  <input type="submit" id="submit"  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>

CodePudding user response：

I would move the bold label out of the gradesArray element.

<b>Grades: </b>
<p id="gradesArray"></p>

CodePudding user response：

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 ><b>Got </b></p><input type="number"  id="iGotThis" name="number">
  <p ><b> out of </b></p><input type="number"  id="outOfThis" name="number">
  <br>
  <br>
  <input type="submit" id="submit"  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

CodePudding user response：

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.
You had a syntax error in your initial code; documentgetElementById as opposed to document.getElementById.
You don't need arrayList.

<!DOCTYPE html>
<html>

<head>
  <style>
    .margin {
      margin-left: 80px;
    }
  </style>
</head>

<body>
  <br>
  <br>
  <p ><b>Got </b></p><input type="number"  id="iGotThis" name="number">
  <p ><b> out of </b></p><input type="number"  id="outOfThis" name="number">
  <br>
  <br>
  <input type="submit" id="submit"  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>