你会如何在 finally 中隐藏这个按钮？

编程问答 2022-04-30

问题描述

我想在代码点击 finally 后立即隐藏按钮，但它不会隐藏。我想知道你们会怎么做？

这里是 html-

<body>
<main class="container">
    <div class="countries">
    </div>
    <button class="btn-country">Where am I?</button>
    <div class="images"></div> 
</main> 
</body>

这里是脚本 -

const btn = document.querySelector('.btn-country');
const countriesContainer = document.querySelector('.countries');


 const renderError = function (message) {
        countriesContainer.insertAdjacentText('beforeend',message);
        countriesContainer.style.opacity = 1;
    };

    const getCountrydata3 = function (country) {
        fetch(`https://restcountries.eu/rest/v2/name/${country}`).then(res => res.json()).then(data => {
    
            renderCountry(data[0]);
    
            //set the neighbour country
            const neighbour = data[0].borders[0];
    
            //the guard clause
            if (!neighbour) return;
    
            //getting the data
    
            return fetch(`https://restcountries.eu/rest/v2/alpha/${neighbour}`)
        }).then(res => res.json()).then(data => renderCountry(data,'neighbour')).catch(err => renderError(`Something went wrong! ${err.message}`)).finally(() => {
            console.log('damn button won\'t hide');
btn.style.visibility = hidden;  //<---**Here it is not working**
        })
    };
    
    btn.addEventListener('click',function () {
        getCountrydata3('sfsfsf');
    
    })

这个按钮不会隐藏在 finally 中。 :S

解决方法

试试这个方法

btn.style.visibility = "hidden";

或者，

document.querySelector('.btn-country').style.visibility = "hidden";

或者，

document.querySelector('.btn-country').style.display ="none";

如果它不起作用，请尝试使用 jquery 或任何其他易于使用的库