为什么我用于更改 HTML 的缩短的 JavaScript 代码不起作用？

问题描述 投票：0回答：1

我有工作代码可以更改我的 HTML 并将类和数据从最高到最低排列，但它非常冗长。我想把它弄短一点。这周我最近学习了 JavaScript，所以这可能只是一个简单的错误。谢谢！

我希望代码在 HTML 上按数量从高到低的顺序显示类。由于代码不起作用，html根本没有显示在网页上。

这是工作代码：

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'

我尝试自己缩小它，但没有成功：

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

这是完整的 JavaScript 代码：

//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'
}

这是完整的 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>
javascript simplify
1个回答
0
投票

这里的问题是你的

placeReplacement
元素并不是你想象的那样。

当你写作时

const foo = someElement.innerHTML

您没有创建对此属性的引用；你只是在访问它的价值。

因此 

foo
包含当时 
someElement.innerHTML
中的任何字符串。

当您稍后写入

foo
时，您所做的只是更新
foo
的值；你不更新了
someElement.innerHTML

考虑到这一点，一种方法可能是：

//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
  }
}
最新问题
© www.soinside.com 2019 - 2025. All rights reserved.