1. 首页
  2. 问题列表
  3. 当我点击转向按钮时，我想显示姓名，年龄和地点？ 如何访问函数中的nextContestant变量？
提问者：小点点

当我点击转向按钮时，我想显示姓名，年龄和地点？ 如何访问函数中的nextContestant变量？


问题是buttonSound函数没有引用nextContestant函数中的currentContestant变量，我很难修复，希望您能提供任何帮助。 我尝试在全局范围内声明它，但是没有帮助，尝试在函数a内部调用函数b，但是没有效果。 我肯定这是一些简单的解决办法，我不太明白。

null

// Temporary hardcoded data
const data = [
    {
        name: 'Dua Lipa',
        age: 22,
        location: 'UK',
        song: 'Arctic Monkeys - Do I Wanna Know?',
        link:'https://www.youtube.com/embed/fZB-ptAnoQc?start=26'
    },
    {
        name: 'James Arthur',
        age: 23,
        location: 'UK',
        song: 'Frankie Vallie - Cant Take my Eyes Off you',
        link:'https://www.youtube.com/embed/JUeEcdS-aa0?start=12'
       
    },
    
];


document.querySelector('.turn-button').addEventListener('click', buttonSound);

// Create event for next button
document.querySelector('.next').addEventListener('click', nextContestant);


// pass the data in the profileIterator function
const contestants = profileIterator(data);


// Call first profile
nextContestant();




// Next profile Display
function nextContestant() {
    const currentContestant = contestants.next().value;
   
 
    // Add a condition if it finishes looping through the array
    if(currentContestant !== undefined){
    document.querySelector('#profileDisplay').innerHTML = `
    <iframe class="hidden-vid" width="560" height="315" src="${currentContestant.link}&rel=0&autoplay=1&mute=2" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    <div id="imageDisplay"><img class="anon"
                            src="media/anon.png"></div>
    <ul class="list-group">
        <li class="list-group-item" id="name">Name: ? 
        </li>
        <li class ="list-group-item" id="age">Age: ?
        </li>
        <li class ="list-group-item" id="location">Location: ?
        </li>
        <li class ="list-group-item">Song: ${currentContestant.song} 
        </li>
    </ul>
    `;
    } else {
        // No more contestants
        window.location.reload();
    }
    return {
        contestant: currentContestant
    }

    // document.querySelector('#imageDisplay').innerHTML = `<img
    // src="${currentContestant.image}">`;
}

// Profile Iterator
function profileIterator(contestants) {
    // counter
let nextIndex = 0;

// return object with next function
return {
    next: function(){
        return nextIndex < contestants.length ?
        {value: contestants[nextIndex++], done: false} :
        {done: true}
    }
};

}



function buttonSound(){

    const sound = document.querySelector('#audio');
    sound.play();
    document.querySelector(".anon").style.display = 'none'
    document.querySelector("iFrame").style.display='block';
    document.querySelector("#name").innerText=`Name: ${currentContestant.name}`;
    document.querySelector("#age").innerText=`Age: ${currentContestant.age}`;
    document.querySelector("#location").innerText=`Location: ${currentContestant.location}`;
    // document.querySelector('#imageDisplay').innerHTML = `<img
    // src="${currentContestant.image}">`;
}
* {
    margin: 0;
    padding: 0;
}

.turn-button {
    padding: 3rem;
    color: white;
    background-color: red;
    text-align: center;
    font-size: 2rem;
    border-radius: 50%;
    cursor: pointer;
    border: 0.3rem solid white;
    box-shadow: 0 1.5rem black;
    text-decoration: none;
    align-self: center;
}

/* :active an element being activated by a user */
.turn-button:active {
    transform: translateY(1rem);
    box-shadow: 0rem 1rem black;
    transform: translateY(4px);
}

.next {
    background-color: black;
    color: white;
    margin-left: 10rem;
    align-self: center;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 1.5rem;
}

.stage {
    width: 100%;
    position: relative;
    /* width: 100%; */
    overflow: hidden;
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%); */
    z-index: -1;
}

video {
    width: 100%;
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%); */
    z-index: -1;
}

.profile {
    position: absolute;
    top: 20%;
    left: 6%;
}

.judges-panel {
    display: flex;
    background-color: grey;
    justify-content: center;
    align-items: center;
}

iframe {
    display: none;
}

img {
    height: 15rem;
    width: 15rem;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=
    , initial-scale=1.0"
        />
        <link rel="stylesheet" href="style.css" />
        <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
            crossorigin="anonymous"
        />
        <title>Document</title>
    </head>
    <body>
        <div class="stage">
            <video id="videoBG" poster="media/poster.png" autoplay muted loop>
                <source src="media/vid-background.mp4" type="video/mp4" />
            </video>
            <div class="container profile">
                <div class="row">
                    <div class="col-md-6 mx-auto text-center">
                        <h1 class="mb-3"></h1>
                        <br />
                        <div id="profileDisplay"></div>
                        <br />
                    </div>
                </div>
            </div>
        </div>

        <div class="judges-panel">
            <button class="turn-button">TURN</button>
            <audio id="audio" src="media/button-sound.mp3"></audio>
            <button class="next">Next Contestant</button>
        </div>
        
        <!-- <iframe class="hidden-vid" width="560" height="315" src="https://www.youtube.com/embed/c8m6kBF5ML8?rel=0&autoplay=1&mute=2" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
       
        
        </iframe>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script
            src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"
        ></script>
        <script src="app.js"></script>
    </body>
</html>

null


共2个答案

匿名用户

这都与范围有关； var是函数作用域的，let是块作用域的，const是指具有不能改变的固定值的变量（常数变量）。 您将CurrentContestant定义为在函数NextContestant中具有作用域的常量，这是没有意义的，因为它会在每个玩家回合中改变值。 如果要使它成为全局的，可以在任何函数之外将它定义为varNextContestant=null；。

匿名用户

为了补充彼得·布兰德的回答，它确实与范围有关。 因为您在函数中定义了变量，所以它在全局范围内不可用。 我将变量添加到您发布的脚本中，并在CodePen上运行它，看起来一切正常:）

// Temporary hardcoded data
const data = [
    {
        name: 'Dua Lipa',
        age: 22,
        location: 'UK',
        song: 'Arctic Monkeys - Do I Wanna Know?',
        link:'https://www.youtube.com/embed/fZB-ptAnoQc?start=26'
    },
    {
        name: 'James Arthur',
        age: 23,
        location: 'UK',
        song: 'Frankie Vallie - Cant Take my Eyes Off you',
        link:'https://www.youtube.com/embed/JUeEcdS-aa0?start=12'
       
    },
    
];


document.querySelector('.turn-button').addEventListener('click', buttonSound);

// Create event for next button
document.querySelector('.next').addEventListener('click', nextContestant);


// pass the data in the profileIterator function
const contestants = profileIterator(data);


// Call first profile
nextContestant();

var currentContestant = null;


// Next profile Display
function nextContestant() {
    const currentContestant = contestants.next().value;
   
 
    // Add a condition if it finishes looping through the array
    if(currentContestant !== undefined){
    document.querySelector('#profileDisplay').innerHTML = `
    <iframe class="hidden-vid" width="560" height="315" src="${currentContestant.link}&rel=0&autoplay=1&mute=2" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    <div id="imageDisplay"><img class="anon"
                            src="media/anon.png"></div>
    <ul class="list-group">
        <li class="list-group-item" id="name">Name: ? 
        </li>
        <li class ="list-group-item" id="age">Age: ?
        </li>
        <li class ="list-group-item" id="location">Location: ?
        </li>
        <li class ="list-group-item">Song: ${currentContestant.song} 
        </li>
    </ul>
    `;
    } else {
        // No more contestants
        window.location.reload();
    }
    return {
        contestant: currentContestant
    }

    // document.querySelector('#imageDisplay').innerHTML = `<img
    // src="${currentContestant.image}">`;
}

// Profile Iterator
function profileIterator(contestants) {
    // counter
let nextIndex = 0;

// return object with next function
return {
    next: function(){
        return nextIndex < contestants.length ?
        {value: contestants[nextIndex++], done: false} :
        {done: true}
    }
};

}



function buttonSound(){

    const sound = document.querySelector('#audio');
    sound.play();
    document.querySelector(".anon").style.display = 'none'
    document.querySelector("iFrame").style.display='block';
    document.querySelector("#name").innerText=`Name: ${currentContestant.name}`;
    document.querySelector("#age").innerText=`Age: ${currentContestant.age}`;
    document.querySelector("#location").innerText=`Location: ${currentContestant.location}`;
    // document.querySelector('#imageDisplay').innerHTML = `<img
    // src="${currentContestant.image}">`;
}

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS