javascriptsimplify

Why won't my shortened JavaScript code for changing my HTML work?

I have working code that changes my HTML and arranges classes and data from highest to lowest, but it is very lengthy. I would like to make it shorter. I recently learned JavaScript this week, so it might just be a simple mistake. Thank you!

I want the code to display the classes in order of highest to lowest amount on the HTML. With the code that does not work, the html was not displayed on the webpage at all.

This is the working code:

if (className[0] == positionedValues[0]) {
  document.querySelector('.first').innerHTML = P1A
  document.querySelector('.P1A').innerHTML = ""
  document.querySelector('.P1A-rank').innerHTML = '1'
} else if (className[0] == positionedValues[1]) {
  document.querySelector('.second').innerHTML = P1A
  document.querySelector('.P1A').innerHTML = ""
  document.querySelector('.P1A-rank').innerHTML = '2'
} else if (className[0] == positionedValues[2]) {
  document.querySelector('.third').innerHTML = P1A
  document.querySelector('.P1A').innerHTML = ""
  document.querySelector('.P1A-rank').innerHTML = '3'
} else if (className[0] == positionedValues[3]) {
  document.querySelector('.fourth').innerHTML = P1A
  document.querySelector('.P1A').innerHTML = ""
  document.querySelector('.P1A-rank').innerHTML = '4'

I tried making it smaller myself but it did not work:

//Constants for places
let firstP = document.querySelector('.first').innerHTML
let secondP = document.querySelector('.second').innerHTML
let thirdP = document.querySelector('.third').innerHTML
let fourthP = document.querySelector('.fourth').innerHTML

const placeReplacement = [firstP, secondP, thirdP, fourthP]

for (let i = 0; i < placeReplacement.length; i++) {
  if (className[0] == positionedValues[i]) {
    document.querySelector('.P1A-rank').innerHTML = i+1
    placeReplacement[i] = P1A
  }
}

This is the full JavaScript code:

//Arrays for class amount and name
const className = ['P1A', 'P1B', 'P2A', 'P2B'];
const classAmt = [1, 0.5, 3.7, 12.7];

for (let i = 0; i < className.length; i++) {
  className[i] = classAmt[i];
}


//Displaying amounts
document.querySelector('.P1A-amt').innerHTML = className[0]+' kg';
document.querySelector('.P1B-amt').innerHTML = className[1]+' kg';
document.querySelector('.P2A-amt').innerHTML = className[2]+' kg';
document.querySelector('.P2B-amt').innerHTML = className[3]+' kg';


//Positioning by amount and storing in an arranged array
let first = 0;
let second = 0;
let third = 0;
let fourth = 0;

for (let i = 0; i < className.length; i++) {
  if (className[i] > first) {
    first = className[i]
  }
}

for (let i = 0; i < className.length; i++) {
  if (className[i] < first && className[i] > second) {
    second = className[i]
  }
}

for (let i = 0; i < className.length; i++) {
  if (className[i] < second && className[i] > third) {
    third = className[i]
  }
}

for (let i = 0; i < className.length; i++) {
  if (className[i] < third && className[i] > fourth) {
    fourth = className[i]
  }
}

const positionedValues = [first, second, third, fourth]


//Positioning the classes in the HTML
let P1A = document.querySelector('.P1A').innerHTML
let P1B = document.querySelector('.P1B').innerHTML
let P2A = document.querySelector('.P2A').innerHTML
let P2B = document.querySelector('.P2B').innerHTML



//main problem

//For P1A
if (className[0] == positionedValues[0]) {
  document.querySelector('.first').innerHTML = P1A
  document.querySelector('.P1A').innerHTML = ""
  document.querySelector('.P1A-rank').innerHTML = '1'
} else if (className[0] == positionedValues[1]) {
  document.querySelector('.second').innerHTML = P1A
  document.querySelector('.P1A').innerHTML = ""
  document.querySelector('.P1A-rank').innerHTML = '2'
} else if (className[0] == positionedValues[2]) {
  document.querySelector('.third').innerHTML = P1A
  document.querySelector('.P1A').innerHTML = ""
  document.querySelector('.P1A-rank').innerHTML = '3'
} else if (className[0] == positionedValues[3]) {
  document.querySelector('.fourth').innerHTML = P1A
  document.querySelector('.P1A').innerHTML = ""
  document.querySelector('.P1A-rank').innerHTML = '4'
}

//OR

//Constants for places
let firstP = document.querySelector('.first').innerHTML
let secondP = document.querySelector('.second').innerHTML
let thirdP = document.querySelector('.third').innerHTML
let fourthP = document.querySelector('.fourth').innerHTML

const placeReplacement = [firstP, secondP, thirdP, fourthP]

for (let i = 0; i < placeReplacement.length; i++) {
  if (className[0] == positionedValues[i]) {
    document.querySelector('.P1A-rank').innerHTML = i+1
    placeReplacement[i] = P1A
    document.querySelector('.P1A').innerHTML = ""
  }
}


//The rest of this is just repeated working code for arranging the text. I would like to change this aswell if I can find a way to change the first.

//For P1B
if (className[1] == positionedValues[0]) {
  document.querySelector('.first').innerHTML = P1B
  document.querySelector('.P1B').innerHTML = ""
  document.querySelector('.P1B-rank').innerHTML = '1'
} else if (className[1] == positionedValues[1]) {
  document.querySelector('.second').innerHTML = P1B
  document.querySelector('.P1B').innerHTML = ""
  document.querySelector('.P1B-rank').innerHTML = '2'
} else if (className[1] == positionedValues[2]) {
  document.querySelector('.third').innerHTML = P1B
  document.querySelector('.P1B').innerHTML = ""
  document.querySelector('.P1B-rank').innerHTML = '3'
} else if (className[1] == positionedValues[3]) {
  document.querySelector('.fourth').innerHTML = P1B
  document.querySelector('.P1B').innerHTML = ""
  document.querySelector('.P1B-rank').innerHTML = '4'
}

//For P2A
if (className[2] == positionedValues[0]) {
  document.querySelector('.first').innerHTML = P2A
  document.querySelector('.P2A').innerHTML = ""
  document.querySelector('.P2A-rank').innerHTML = '1'
} else if (className[2] == positionedValues[1]) {
  document.querySelector('.second').innerHTML = P2A
  document.querySelector('.P2A').innerHTML = ""
  document.querySelector('.P2A-rank').innerHTML = '2'
} else if (className[2] == positionedValues[2]) {
  document.querySelector('.third').innerHTML = P2A
  document.querySelector('.P2A').innerHTML = ""
  document.querySelector('.P2A-rank').innerHTML = '3'
} else if (className[2] == positionedValues[3]) {
  document.querySelector('.fourth').innerHTML = P2A
  document.querySelector('.P2A').innerHTML = ""
  document.querySelector('.P2A-rank').innerHTML = '4'
}

//For P2B
if (className[3] == positionedValues[0]) {
  document.querySelector('.first').innerHTML = P2B
  document.querySelector('.P2B').innerHTML = ""
  document.querySelector('.P2B-rank').innerHTML = '1'
} else if (className[3] == positionedValues[1]) {
  document.querySelector('.second').innerHTML = P2B
  document.querySelector('.P2B').innerHTML = ""
  document.querySelector('.P2B-rank').innerHTML = '2'
} else if (className[3] == positionedValues[2]) {
  document.querySelector('.third').innerHTML = P2B
  document.querySelector('.P2B').innerHTML = ""
  document.querySelector('.P2B-rank').innerHTML = '3'
} else if (className[3] == positionedValues[3]) {
  document.querySelector('.fourth').innerHTML = P2B
  document.querySelector('.P2B').innerHTML = ""
  document.querySelector('.P2B-rank').innerHTML = '4'
}

This is the full HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Leaderboarad</title>

    <link rel="stylesheet" href="leaderboard.css">
  </head>
  <body>


    <input placeholder="Search for your class!">
    <!--Places-->
    <div class="places">
      <div class="top-3">
        <div class="first"></div>
        <div class="second"></div>
        <div class="third"></div>
      </div>

      <div class="see-more">
        <button>See More</button>
      </div>

      <div class="fourth"></div>
      <div class="fifth"></div>
      <div class="sixth"></div>
      <div class="seventh"></div>
      <div class="eigth"></div>
      <div class="ninth"></div>
      <div class="tenth"></div>
      <div class="eleventh"></div>
      <div class="twelveth"></div>
      <div class="thirteenth"></div>
      <div class="fourteenth"></div>
      <div class="fifteenth"></div>
      <div class="sixteenth"></div>
      <div class="seventeenth"></div>
      <div class="eighteenth"></div>
      <div class="nineteenth"></div>
      <div class="twentyth"></div>
      <div class="twentyfirst"></div>
      <div class="twentysecond"></div>
    </div>

    <!--Class info for places-->
    <div class="class-info">
      <div class="P1A">
        <button class="P1A-rank">x</button>
        <h1 class="class">Primary 1 A</h1>
        <p class="P1A-amt">x</p>
        <button class="P1A-help">&#9994;</button>
      </div>

      <div class="P1B">
        <button class="P1B-rank">x</button>
        <h1 class="class">Primary 1 B</h1>
        <p class="P1B-amt">x</p>
        <button class="P1B-help">&#9994;</button>
      </div>

      <div class="P2A">
        <button class="P2A-rank">x</button>
        <h1 class="class">Primary 2 A</h1>
        <p class="P2A-amt">x</p>
        <button class="P1B-help">&#9994;</button>
      </div>

      <div class="P2B">
        <button class="P2B-rank">x</button>
        <h1 class="class">Primary 2 B</h1>
        <p class="P2B-amt">x</p>
        <button class="P2B-help">&#9994;</button>
      </div>
    </div>


    <script src="leaderboard.js"></script>
  </body>
</html>
Solution

  • The problem here is that yourplaceReplacement elements are not what you think they are.

    When you write

    const foo = someElement.innerHTML

    you're not creating a reference to this property; you're just accessing its value.

    So foo contains whatever string is in someElement.innerHTML at that time.

    When you later write to foo, all you're doing is updating foo's value; you are not updating someElement.innerHTML

    With that in mind, one approach might be:

    //Constants for places
let firstP = document.querySelector('.first')
let secondP = document.querySelector('.second')
let thirdP = document.querySelector('.third')
let fourthP = document.querySelector('.fourth')

const placeReplacement = [firstP, secondP, thirdP, fourthP]

for (let i = 0; i < placeReplacement.length; i++) {
  if (className[0] == positionedValues[i]) {
    document.querySelector('.P1A-rank').innerHTML = i+1
    placeReplacement[I].innerHTML = P1A
  }
}