Невозможно обновить данные, извлеченные из API, при просмотре в полноэкранном режиме на codepen - PullRequest
Новая
       12

Невозможно обновить данные, извлеченные из API, при просмотре в полноэкранном режиме на codepen

0 голосов
/ 20 октября 2018

Возможно, я имею дело с ошибкой, но посмотрите!Вот мое перо .

Но когда я переключаюсь в режим просмотра полной страницы, функциональность не работает должным образом.Все отлично работает, но название с полным названием нет!

Есть идеи? 

        .then(
        (data) => {
            img.src = data.picture.large
            image_title.innerHTML = data.name.first
            name.innerHTML = `${ data.name.title } ${ data.name.first } ${ data.name.last }`
            sex.innerHTML = ` ${ data.gender }` 
            if(data.gender === 'male') {
                console.log('boy')
                container.style.background = "#20232A"
            }else {
                console.log('girl')
                container.style.background = "#009688";
            }
            age.innerHTML = ` ${ data.dob.age }`
            city.innerHTML = ` ${ data.location.city }`
            post.innerHTML = ` ${ data.location.postcode }`
            state.innerHTML = ` ${ data.location.state }`
            country.innerHTML = ` ${ data.nat }`
            email.innerHTML = ` ${ data.email }`
        }
    )

Ответы [ 2 ]

0 голосов
/ 20 октября 2018

Проблема в том, что у вас есть много переменных, объявленных в глобальной области видимости, и, в частности, одна из них называется «имя».Символ «имя» уже связан с объектом window как имя окна.Утверждение 

const name = infos.querySelector("#full-name");

не делает то, что можно подумать.Похоже, что он должен связать переменную name с элементом <h2>;фактически он устанавливает имя окна в строку «[object HTMLHeadingElement]» (может варьироваться в зависимости от браузера).

На мой взгляд, лучший способ исправить это - очистить весь код путем переносавсе это в манекене IIFE.Добавьте 

(function() {

перед существующей первой строкой и 

})();

после последней строки, и это работает, потому что весь код теперь находится в новой закрытой области видимости и ничто не конфликтует с window свойства.Это также работает, если вы изменяете переменную с «name» на «xname» или что-либо еще, что не сталкивается со встроенным символом браузера.

Почему это работает в представлении Codepen «Редактор»?Я не знаю «глубокого» ответа на этот вопрос, но в представлении «Редактор» страница, создаваемая пером, скрыта в элементе <iframe>.Теперь элемент <iframe> имеет свойство name, но загадочным образом объявление вашей константы name может скрыть это.В полноэкранном режиме ваша страница является фактическим окном верхнего уровня, и в этой ситуации window.name не позволит себе быть затененным.

0 голосов
/ 20 октября 2018

Хорошо, легко исправить: https://codepen.io/geoidesic/full/EdRvGR/

Измените «полное имя» на «полное имя».Не знаю почему (см. Комментарии Pointy), но легко обойтись. 

    <h1 class="title">Random User Generator</h1>
    <hr>

    <div id="content" class="container">
        <div class="container--info">
            <div id="imgContainer" class="container--info-imgContainer">
                <div class="image">
                    <img id="image" src="https://am3pap002files.storage.live.com/y4pWy8i6R2SB4wYy260mAfz0bItbMHzhUBps0ip7YWPD-gdqYRVbcANXyN68L_j3mnDBLeYEAHTaD83MDocM42zlZq8PkUYG0sYL7fDzK9_nCOAmsCs9nylgyN-TjYyGEqulmG2SYITb0VQ_v9_fbsXbEYdobbp3hsGQZz2GLfowMkdWg97yga-i13mzZi_K5Xf/20180912_172044.jpg?psid=1&width=1528&height=1890" alt="">
                    <div id="image-title" class="image-title toCapital">Evangelos</div>
                </div>
            </div>
            <div class="container--info-details">
                <div id="infos" class="container--info-details--inner">
                        <h2 id="fullname" class="container--info-details--inner-header toCapital">evangelos kolimitras</h2>
                        <div class="container--info-details--inner-gender toCapital">Sex: <span id="sex">Male</span></div>
                        <div class="container--info-details--inner-age">Age: <span id="age">26</span></div>
                        <div class="container--info-details--inner-location">
                            <div class="container--info-details--inner-location--city toCapital">City: <span id="city">fellbach</span></div>
                            <div class="container--info-details--inner-location--postcode ">Post Code: <span id="post">70734</span></div>
                            <div class="container--info-details--inner-location--state toCapital">State: <span id="state">baden würrtemberg</span></div>
                            <div class="container--info-details--inner-location--country toCapital">Nationality: <span id="country">de</span></div>
                        </div>
                        <div class="container--info-details--email">Email: <span id="email">evan@kol.de</span></div>
                </div>
            </div>
        </div>
        <div class="container--button">
            <div class="container--button-inner">
                <button class="btn" id="btn">Generate User</button>
            </div>
        </div>
    </div>



const url = 'https://randomuser.me/api/';

const container = document.querySelector('#content');
const button = document.querySelector('#btn');

/* Constants responsible for retrieving DOM elements from the Image Section */
const imgContent = document.querySelector('#imgContainer');
const img = imgContent.querySelector('#image');
const image_title = imgContent.querySelector('#image-title');

/* Variables responsible for retrieving DOM elements from the Infos Section*/
const infos = document.querySelector('#infos');
const name = infos.querySelector('#fullname');
const sex = infos.querySelector('#sex');
const age = infos.querySelector('#age');
const city = infos.querySelector('#city');
const post = infos.querySelector('#post');
const state = infos.querySelector('#state');
const country = infos.querySelector('#country');
const email = infos.querySelector('#email');



button.addEventListener(
    'click',
    () => {
        fetch(url)
        .then(handleErrors)
        .then( r => r.json() )
        .then(
            (res) => {
                const data = res.results[0];
                console.log(data);
                return data;
            }
        )

        /* DOM MANIPULATION */

        .then(
            (data) => {
                img.src = data.picture.large
                image_title.innerHTML = data.name.first
                full_name.innerHTML = `${ data.name.title } ${ data.name.first } ${ data.name.last }`
                sex.innerHTML = ` ${ data.gender }` 
                if(data.gender === 'male') {
                    console.log('boy')
                    container.style.background = "#20232A"
                }else {
                    console.log('girl')
                    container.style.background = "#009688";
                }
                age.innerHTML = ` ${ data.dob.age }`
                city.innerHTML = ` ${ data.location.city }`
                post.innerHTML = ` ${ data.location.postcode }`
                state.innerHTML = ` ${ data.location.state }`
                country.innerHTML = ` ${ data.nat }`
                email.innerHTML = ` ${ data.email }`
            }
        )

        .catch( (error) => { console.log(error) } )


        function handleErrors(response)  {
            if(!response.ok) {
                throw Error(response.status);
            };
            return response;
        }
    }
);
...