全局變量未更新

Question

我正在嘗試制作 Chuck Norris 笑話生成器。 我有一個生成新笑話按鈕，可以從 api 獲取一個新笑話，並且我有幾個具有不同笑話類別的按鈕。

我有一個名為categories的全局變量，每當單擊類別按鈕時，我都會嘗試對其進行變異，但是當獲取新笑話時，該變量繼續具有默認值。

我究竟做錯了什么？

這是代碼：

document.addEventListener('DOMContentLoaded', start);
let category = 'animal';

async function fetchJoke(arrayz) {
    const response = await Promise.all(arrayz.map(url => fetch(url).then(response => response.json())));

    return response;
}

function start() {
    console.log('ready');
    fetchJoke(arrayz).then(render);
}

const arrayz = [`https://api.chucknorris.io/jokes/random?category=${category}`, 'https://api.chucknorris.io/jokes/categories'];


function render(data) {
    const main = document.querySelector('main');
    main.innerHTML = '';
    const clone = document.querySelector('.template').content.cloneNode(true);
    const joke = clone.querySelector('p');

    joke.textContent = data[0].value;

    clone.querySelector('.zbutton').addEventListener('click', () => {
        start();
    });
    createButton(data, clone);

    main.appendChild(clone);
}

function createButton(data, clone) {
    data[1].map(category => {
        const button = document.createElement('button');
        button.appendChild(document.createTextNode(category));
        button.addEventListener('click', (e) => {
            category = e.target.innerText;
            start();
        });

        clone.querySelector('.buttons').appendChild(button);
    })
}

鏈接到 jsfiddle

https://jsfiddle.net/rcej8mkf/4/

Answer 1

您有兩個名為category的變量。

• 一個用let在腳本頂部創建的，您只能從中讀取。
• 一個是傳遞給 function 的第一個也是唯一一個參數的名稱，你在最后傳遞給map 。

您覆蓋后者，但隨后再也不會讀取它。

---

如果您想在此時覆蓋全局變量，請不要用較窄的 scope 中的另一個同名變量來掩蓋它。

當然，這帶來了另一個問題，即當您生成要分配給arrayz中的第一項的字符串時，您只能從全局category變量中讀取一次。

您需要在start內部更新它才能發揮作用。

Answer 2

arrayz只計算一次，初始值為category 。 arrayz永遠不會更新。 嘗試將arrayz定義放在你的start function 中。

編輯：正如其他人提到的那樣，全球類別被爭論所掩蓋。