Почему не выводиться результат запроса в консоль?

Question

[Дмитрий Ярощук]

Не могу понять почему не выводиться результат запроса в консоль.

<div class="wrapper">
        <div class="container">
            <div class="swapi">
                <h1 class="swapi__title">SWAPI</h1>
                <form class="swapi__form" >
                    <span class="swapi__url-span js--url-main">https://swapi.dev/api/</span>
                    <label class="swapi__label" for="url">
                        <input id="url" value="planets/3/" class="swapi__input js--endPoint" type="text" placeholder="people/1/">
                    </label>
                    <button class="swapi__button js--button-request">Get info</button>
                </form>
                <div class="swapi-result">
                    <div class="swapi-result__container">
                        <div class="swapi-result__info">
                            <div class="swapi-result__id"></div>
                            <div class="swapi-result__controller"></div>
                        </div>
                        <pre class="swapi-result__code js--code"></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

function mainFunc( {mainUrl, endPoint, button} ) {
    console.log(button)
    button.addEventListener('click', () => {
        (async function () {
            const promise = await fetch(mainUrl.textContent + endPoint.value + '');
            console.log(promise);
            const data = await promise.json();
            console.log(data);
        })()
    })
}
mainFunc({
    mainUrl: document.querySelector('.js--url-main'),
    endPoint: document.querySelector('.js--endPoint'),
    button: document.querySelector('.js--button-request'),
});

Comments

[Шам]

там селектор у button вроде двойной класс, типа .swapi__button.js--button-request

[Дмитрий Ярощук]

Шам, проверил, с селектором все в порядке

[Lapita12]

<div class="wrapper">
    <div class="container">
        <div class="swapi">
            <h1 class="swapi__title">SWAPI</h1>
            <form class="swapi__form" >
                <span class="swapi__url-span js--url-main">https://swapi.dev/api/</span>
                <label class="swapi__label" for="url">
                    <input id="url" value="planets/3/" class="swapi__input js--endPoint" type="text" placeholder="people/1/">
                </label>
                <button class="swapi__button js--button-request">Get info</button>
            </form>
            <div class="swapi-result">
                <div class="swapi-result__container">
                    <div class="swapi-result__info">
                        <div class="swapi-result__id"></div>
                        <div class="swapi-result__controller"></div>
                    </div>
                    <pre class="swapi-result__code js--code"></pre>
                </div>
            </div>
        </div>
    </div>
</div>

function mainFunc( {mainUrl, endPoint, button} ) {
    console.log(button)
    button.addEventListener('click', (event) => {
        event.preventDefault();
        (async function () {
            const promise = await fetch(mainUrl.textContent + endPoint.value + '');
            console.log(promise);
            const data = await promise.json();
            console.log(data);
        })()
    })
}
mainFunc({
    mainUrl: document.querySelector('.js--url-main'),
    endPoint: document.querySelector('.js--endPoint'),
    button: document.querySelector('.js--button-request'),
});

[Шам]

да event.preventDefault() иначе форма отправляется по клику.