全局变量未更新

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 中。

编辑：正如其他人提到的那样，全球类别被争论所掩盖。