javascript - JS中的API获取数据

Question

我最近一直在为我玩的游戏开发拳击评分器，但遇到了一个小问题。该函数从 myTextarea 获取用户输入值，然后将其拆分为一个数组。然后，该函数使用用户输入获取 api，如果成功，则将评级添加到小计类别(例如:Golden)。循环完成后，将向用户显示所有类别的值。

由于某种原因，总计类别和小计类别的输出始终具有不同的值。仅当用户输入较大时才会发生这种情况。

Input that causes different outputs Output1 Output2

同样，这些输出是完全随机的，并且只是示例。有时它甚至会输出正确的数量，但这种情况很少见。

function boxRater() {
    var x = document.getElementById("myTextarea").value.split(/\n|-|Level|:| |,/);
    var helper = {
        total: "Total: ",
        shadow: 0,
        cursed: 0,
        rainbow: 0,
        glitter: 0,
        golden: 0,
        luminous: 0,
        amount: 0
    };
    var doNothing = {
        total: "Total: ",
        amount: 0
    };

    url = 'https://pokemoncreed.net/ajax/pokedex.php?pokemon='

    for (var i = 0; i <= x.length; i++) {
        fetch(url + x[i])
            .then((res) => res.json())
            .then((data) => {
                console.log(data.rating);
                if (data.success === false) {
                    console.log("error");
                    console.error(err);
                }
                if (data.name.includes("Golden")) {
                    if (data.rating.includes("m")) {
                        doNothing.amount = parseFloat(data.rating) * 1000000;
                        helper.golden = doNothing.amount + helper.golden;
                    }
                    if (data.rating.includes("k")) {
                        doNothing.amount = parseFloat(data.rating) * 1000;
                        helper.golden = doNothing.amount + helper.golden;
                    }
                }
                if (data.name.includes("Rainbow")) {
                    if (data.rating.includes("m")) {
                        doNothing.amount = parseFloat(data.rating) * 1000000;
                        helper.rainbow = doNothing.amount + helper.rainbow;
                    }
                    if (data.rating.includes("k")) {
                        doNothing.amount = parseFloat(data.rating) * 1000;
                        helper.rainbow = doNothing.amount + helper.rainbow;
                    }
                }
                if (data.name.includes("Shadow")) {
                    if (data.rating.includes("m")) {
                        doNothing.amount = parseFloat(data.rating) * 1000000;
                        helper.shadow = doNothing.amount + helper.shadow;
                    }
                    if (data.rating.includes("k")) {
                        doNothing.amount = parseFloat(data.rating) * 1000;
                        helper.shadow = doNothing.amount + helper.shadow;
                    }
                }
                if (data.name.includes("Luminous")) {
                    if (data.rating.includes("m")) {
                        doNothing.amount = parseFloat(data.rating) * 1000000;
                        helper.luminous = doNothing.amount + helper.luminous;
                    }
                    if (data.rating.includes("k")) {
                        doNothing.amount = parseFloat(data.rating) * 1000;
                        helper.luminous = doNothing.amount + helper.luminous;
                    }
                }
                if (data.name.includes("Cursed")) {
                    if (data.rating.includes("m")) {
                        doNothing.amount = parseFloat(data.rating) * 1000000;
                        helper.cursed = doNothing.amount + helper.cursed;
                    }
                    if (data.rating.includes("k")) {
                        doNothing.amount = parseFloat(data.rating) * 1000;
                        helper.cursed = doNothing.amount + helper.cursed;
                    }
                }
                if (data.name.includes("Glitter")) {
                    if (data.rating.includes("m")) {
                        doNothing.amount = parseFloat(data.rating) * 1000000;
                        helper.glitter = doNothing.amount + helper.glitter;
                    }
                    if (data.rating.includes("k")) {
                        doNothing.amount = parseFloat(data.rating) * 1000;
                        helper.glitter = doNothing.amount + helper.glitter;
                    }
                }

                helper.amount = helper.cursed + helper.rainbow + helper.golden + helper.luminous + helper.shadow + helper.glitter;
                document.getElementById("testing").innerHTML = x;

                document.getElementById("golden").innerHTML = helper.golden;
                document.getElementById("rainbow").innerHTML = helper.rainbow;
                document.getElementById("shadow").innerHTML = helper.shadow;
                document.getElementById("cursed").innerHTML = helper.cursed;
                document.getElementById("glitter").innerHTML = helper.glitter;
                document.getElementById("luminous").innerHTML = helper.luminous;
                document.getElementById("total").innerHTML = helper.amount;
            })
    }
}

下面的代码是我一直在测试的 html 页面。 myTextarea 中给出的这些示例同样有效，但给出的列表较长，如屏幕截图中所示。

<!DOCTYPE html>
<html>
<head>
<title> In update </title>
</head>
<body> Testing
<h1>Testing</h1>
<script src="js/boxrater.js"> </script>
   <div id="content">
     <header>
           <h2> Box Rater:</h2><br>
            <textarea rows ="6" cols="40" id="myTextarea">  *****HOW TO USE******
GoldenMankey  - Level 5
ShadowPichu - Level 5
RainbowCaterpie  - Level 5
GlitterDialga - Level 5
CursedMaractus - Level 5
LuminousBidoof - Level 5
*****Make sure to capitalize correctly (ex:GoldenMankey) and do the format above preferabaly ending each line with enter.*****
            </textarea>
            </header>
          <p>Read inside the box to understand how to use and formating.</p>
                    <p>Make sure to  to use <a  href="https://pokemoncreed.net/box_organise.php" target="_blank">Box Organise</a> for quick and easy use. </p>
                    <p> NOTE:The box rater doesn't calculate off for unbased pokemon or do 3x rate for rare genders </p>
       <button type="button" onclick="boxRater()">Rate Box</button>
                        <p id="rainbow"> Rainbow: </p>
            <p id="glitter"> Glitter: </p>
            <p id="cursed"> Cursed: </p>
            <p id="shadow">Shadow: </p>
            <p id="luminous">Luminous: </p>
            <p id="golden">Golden: </p>
            <p id="total">Total: </p>
            <p id="testing"> </p>

</div>
 </body>
</html>

如果有人知道如何解决这个问题，请向我解释一下。评估者适用于个别情况，但我需要它适用于大量用户输入。 ~节日快乐!

Answer 1

感谢 Jaromanda X 评论，我能够修复我的代码。问题是因为它不是异步函数，所以我调整了代码以使其能够与异步一起使用。

function boxRater(){
var x = document.getElementById("myTextarea").value.split(/\n|-|Level|:| |5|,/);
return x;
}
url = 'https://pokemoncreed.net/ajax/pokedex.php?pokemon='
async function totalC () {
const x = boxRater();
console.log(x);
let helper = {total: "Total: ", shadow:0, cursed:0, rainbow:0, glitter:0,
golden:0,luminous:0, amount:0};
let doNothing = {total: "Total: ", amount:0};

for(let i =0; i <= x.length; i++){
let response = await fetch (url+x[i])
        let data = response.json()
        .then((data) => {
            console.log(data.rating);
        if(data.success === false){
    throw new SyntaxError("Error");
 }
if(data.success === true){

  if(data.name.includes("Golden")){
    if (data.rating.includes("m")){
      doNothing.amount = parseFloat(data.rating) * 1000000;
      helper.golden = doNothing.amount + helper.golden;
    }
    if (data.rating.includes("k")){
      doNothing.amount = parseFloat(data.rating) * 1000;
      helper.golden = doNothing.amount + helper.golden;
    }
}
if(data.name.includes("Rainbow")){
  if (data.rating.includes("m")){
      doNothing.amount = parseFloat(data.rating) * 1000000;
      helper.rainbow = doNothing.amount + helper.rainbow;
  }
  if (data.rating.includes("k")){
      doNothing.amount = parseFloat(data.rating) * 1000;
      helper.rainbow = doNothing.amount + helper.rainbow;
  }
}
if(data.name.includes("Shadow")){
  if (data.rating.includes("m")){
      doNothing.amount = parseFloat(data.rating) * 1000000;
      helper.shadow = doNothing.amount + helper.shadow;
  }
  if (data.rating.includes("k")){
     doNothing.amount = parseFloat(data.rating) * 1000;
      helper.shadow = doNothing.amount + helper.shadow;
  }
}
if(data.name.includes("Luminous")){
  if (data.rating.includes("m")){
      doNothing.amount = parseFloat(data.rating) * 1000000;
      helper.luminous = doNothing.amount + helper.luminous;
  }
  if (data.rating.includes("k")){
      doNothing.amount = parseFloat(data.rating) * 1000;
      helper.luminous = doNothing.amount + helper.luminous;
  }
}
if(data.name.includes("Cursed")){
    if (data.rating.includes("m")){
      doNothing.amount = parseFloat(data.rating) * 1000000;
      helper.cursed = doNothing.amount + helper.cursed;
    }
    if (data.rating.includes("k")){
      doNothing.amount = parseFloat(data.rating)*1000;
      helper.cursed = doNothing.amount + helper.cursed;
    }
}
if(data.name.includes("Glitter")){
  if (data.rating.includes("m")){
   doNothing.amount = parseFloat(data.rating) * 1000000;
      helper.glitter = doNothing.amount + helper.glitter;
  }
  if (data.rating.includes("k")){
      doNothing.amount = parseFloat(data.rating) * 1000;
      helper.glitter = doNothing.amount + helper.glitter;
  }
}
if (data.rating.includes("Not rated")){
    console.log("Not rated");
}
} 
helper.amount = helper.cursed+helper.rainbow+helper.golden+helper.luminous+helper.shadow+helper.glitter;
document.getElementById("golden").innerHTML = helper.golden;
document.getElementById("rainbow").innerHTML = helper.rainbow;
document.getElementById("shadow").innerHTML = helper.shadow;
document.getElementById("cursed").innerHTML = helper.cursed;
document.getElementById("glitter").innerHTML = helper.glitter;
document.getElementById("luminous").innerHTML = helper.luminous;
document.getElementById("cost").innerHTML = helper.amount ;
        })

}

}