在 codepen 上全屏查看时无法更新从 API 获取的数据

Question

可能我正在处理一个错误，但请看一下！这是我的 pen.

但是当我更改为完整页面视图时，该功能无法正常工作。一切正常，但全名标题不正常！

也许有什么想法？

        .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 }`
        }
    )

Answer 1

好的简单修复： https://codepen.io/geoidesic/full/EdRvGR/

将 'full-name' 更改为 'fullname'。不知道为什么（请参阅 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;
        }
    }
);

Answer 2

问题是您在全局范围内声明了很多变量，特别是其中一个名为 "name"。符号 "name" 已作为 window 的名称绑定到 window 对象。声明

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

不按照人们的想法去做。看起来应该将变量 name 绑定到 <h2> 元素；事实上，它所做的是将 window 名称设置为字符串“[object HTMLHeadingElement]”（可能因浏览器而异）。

在我看来，修复它的最佳方法是通过将所有代码包装在虚拟 IIFE 中来净化所有代码。添加

(function() {

在现有的第一行和

之前

})();

在最后一行之后，它起作用了，因为所有代码现在都在一个新的私有范围内，没有任何内容与 window 属性冲突。如果您将变量从 "name" 更改为 "xname" 或任何其他不与内置浏览器符号冲突的变量，它也会起作用。

为什么它在 Codepen "Editor" 视图中有效？我不知道 "deep" 的答案，但在编辑器视图中，您的笔创建的页面隐藏在 <iframe> 元素中。现在 <iframe> 元素确实有一个 "name" 属性，但神秘的是，您的 name 常量的声明允许隐藏它。在 "Full screen" 视图中，您的页面是实际的顶级 window，在这种情况下 window.name 不会允许自己被隐藏。

在 codepen 上全屏查看时无法更新从 API 获取的数据

Cannot update data fetched from an API when viewing on full screen on codepen

javascript

fetch-api

codepen