javascript - 使用 PokeAPI 获取数据。无法弄清楚为什么 span 元素没有更新

问题描述

所以我使用 PokeAPI 来获取口袋妖怪的名称，然后改组该名称，用户应该猜测输入中的内容。如果他们不知道，那么他们可以单击下一步按钮，它会重新洗牌一个新的 mon。如果他们猜对了，他们可以按下相同的下一个按钮来获得新的周一。每次他们猜对时，分数都会增加 1。这是有效的，但我无法弄清楚为什么游戏的总游戏跨度也没有更新。请原谅我对 JS 的糟糕尝试，如果你能帮助我让我的代码看起来更好，那我是个新手。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link rel="stylesheet" href="style.css" />
        <title>Who's that Pkmn?</title>
    </head>

    <body>
        <header>
            <h1>Who's that Pokemon?!</h1>
        </header>

      <div id="jumble">?????</div>

        <div class="container">
            <input id="guess" type="text" placeholder="enter pkmn name" />
            <button id="submit" class="btn" type="submit">go</button>
            <button id="next" class="btn">next</button>
        <p id="msg">unshuffle the letters</p>
    </div>


        <div id="scorekeepers">
            <p>Score: <span id="score">0</span>
            out of: <span id="gamesPlayed">0</span></p>
        </div>

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


let jumbledName = document.querySelector("#jumble");
let guessInput = document.querySelector('#guess')
let submitButton = document.querySelector('#submit')
let nextButton=document.querySelector('#next')
let messageDisplay = document.querySelector('#msg')
let score = document.querySelector('#score')
let gamesPlayed = document.querySelector('#gamesPlayed')

score = 0;
gamesPlayed = 0;

let getPokemonName = function() {
    fetch(`https://pokeapi.co/api/v2/pokemon/${Math.floor(Math.random()*151+1)}/`)
        .then(function(response) {
            return response.json();
        })
        .then(function(data) {
            const pokeName = data.name;
            const pokeNameJumbled = pokeName.shuffle();
            displayInfomation(pokeName, pokeNameJumbled);
        });
};
getPokemonName();
guessInput.value=''
// pokeNameJumbled=''
const displayInfomation = function(name, jumbledName) {
    pokeName = name;
    pokeNameJumbled = jumbledName;
    jumble.textContent = jumbledName;
};
const displayMessage = function(message) {
    document.querySelector("#msg").textContent = message;
};

const checkName = function () {
    document.querySelector("#guess").textContent = guessInput;
    const guess = document.querySelector("#guess").value.toLowerCase();

    if (!guess) {
        displayMessage("No guess entered!");
    } else if (guess === pokeName) {
        displayMessage(`Thats correct! It's ${pokeName}!`)
        score++
        document.querySelector("#score").textContent = score;
        guessInput.value=''

    } else if (guess != pokeName) {
        displayMessage(`Wrong!`);
        document.querySelector("#gamesPlayed").textContent = gamesPlayed;
    }
};

submitButton.addEventListener('click', checkName)
nextButton.addEventListener('click',getPokemonName)

String.prototype.shuffle = function() {
    var a = this.split(""),
        n = a.length;
    for (var i = n - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var tmp = a[i];
        a[i] = a[j];
        a[j] = tmp;
    }
    return a.join("");
};

标签： javascripthtmlapifetch-api

javascript - 使用 PokeAPI 获取数据。无法弄清楚为什么 span 元素没有更新

问题描述

解决方案

推荐阅读