全局变量未更新

debugcn 发表于 Dev

为什么你会做

我正在尝试制作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/

昆汀

您有两个名为的变量category。