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

Question

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>

You are replacing the entire HTML inside of
, just add to it instead. `document.getElementById("gradesArray").innerHTML += grades;` — Ricardo A, May 02 '22 at 17:41
Well, yes. `innerHTML = grades` replaces _all_ of the HTML of that element with the new HTML. Maybe have two spans in there. One for the label, the other for the updated HTML. — Andy, May 02 '22 at 17:43
You could nest a `span` that you'll ultimately edit `
Grades:
` — Tom, May 02 '22 at 17:44

score 2 · Answer 1 · answered May 02 '22 at 17:43

2

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

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

answered May 02 '22 at 17:43

user1599011

650
1
7
11

score 0 · Accepted Answer · answered May 02 '22 at 17:46

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

Thank you, it works! Also, I notice that they finally both reset to ```0```, and if I connect the dots that is probably the ```documentgetElementById```, so thanks for that as well! (I don't have a console log so I can't see those errors. I can't get apps like Notepad++ or anything.) — Landon Wallick, May 02 '22 at 17:52

Shmack · Answer 3 · 2022-05-02T17:55:02.727

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 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>

@LandonWallick thats fine. Whichever was most helpful for you. — Shmack, May 02 '22 at 17:55

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

3 Answers3