Question

我差不多完成了！

对于那些在家里玩的人，我一直在尝试为uni项目构建一个vanilla javascript测验。我从stackoverflow的很棒的人那里得到了一堆帮助。希望这是最后一个问题：）

所有事情的小提琴：https://jsfiddle.net/funkefiddle/tsnr8hra/

我有一个多问题测验。结果记录在一个对象中。在测验结束时'结果'div显示==阻止一个函数将计算出最终答案并编辑innerHTML。

我想根据最终答案结果播放四种不同的Youtube视频中的一种。

我的JS：

        if (document.getElementById("results").style.display == "block") { // Check that we are on the 'results' stage of the quiz, ie the final page. 
            return loadYTPlayer();  

             if (finalResults == "Ninja") {
             player.loadVideoById(d2iD_j1MrJc); 
             console.log('Ninja: d2iD_j1MrJc')
             }
             else if (finalResults == "Robot") {
             player.loadVideoById(B1BdQcJ2ZYY);
             console.log('Robot: B1BdQcJ2ZYY')
             }
             else if (finalResults == "Pirate") {
             player.loadVideoById(TzMbGPa-Vus);
             console.log('Pirate: TzMbGPa-Vus')
             }
             else if (finalResults == "Zombies") {
             player.loadVideoById(TzMbGPa-Vus);
             console.log('ZombiePirates? TzMbGPa-Vus') // Zombies are lame. Moar pirates pls!
             }
          }
        }

function finalResults() {   // Get the values of the answerData object to work out which result is the highest. We need to compare the results somehow.

    var theAnswer = Object.keys(answerData).reduce(function(a, b){ return answerData[a].score > answerData[b].score ? a : b });
    return theAnswer;
}

// Now for a prize for all those loyal quiz participants.
function loadYTPlayer() {

      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
     }


      var player;
      function onYouTubeIframeAPIReady() {

        player = new YT.Player('player', {
          height: '100%',
          width: '100%',
          videoId: '',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

     function onPlayerReady(event) {
       event.target.playVideo();
    }

      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {

          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }

我知道我没有正确调用函数loadYTPlayer（），但是如果我没有将它放在函数中，视频会在页面加载时立即开始播放（尽管div被隐藏）。

据我所知，我可以使用player.loadVideoById（vidID）来启动播放自定义视频的视频我只是不确定何时相对于loadYTPlayer（）函数调用此视频，以便视频无法播放用户完成测验的整个时间。

请停下来。

编辑：我修改了代码以反映下面的建议。将if评估更改为不查看div显示是none还是block。还将链式IF更改为交换机。我没有收到控制台错误“Uncaught TypeError：无法读取未定义的属性'loadVideoById'”

if (nextQuestion == "results") { // If the nextQuestion is equal to results (the ID of the final div) we are at the end of the quiz and need to do a bunch of stuff
        document.getElementById("results").style.display = "block";

        document.getElementById("finalResulthere").innerHTML = "<p>You are a " + finalResults() + ", congratulations!</p><p>Now kick back and enjoy your prize.</p>"; // Modify the innerHTML to display the output of the finalResults function. This should display a paragraph telling us what our personality is.

        loadYTPlayer(); // We have to load the YouTube iFrame API


        var videoId = '';
        switch (finalResults) { // Find the correct video file to load by comparing the finalResults output to the available names in this switch statement. If one of them matches, assign the correct videoId to the variable of the same name. 
        case "Ninja":
            videoId = "d2iD_j1MrJc";
            console.log('Ninja: d2iD_j1MrJc');
            break;

        case "Robot":
            videoId = "4YJ3BTKMILw";
            console.log('Robot: 4YJ3BTKMILw');
            break;

        case "Pirate":
            videoId = "TzMbGPa-Vus";
            console.log('Pirate: TzMbGPa-Vus');
            break;

        case "Zombies":
            videoId = "TzMbGPa-Vus";
            console.log('ZombiePirates? TzMbGPa-Vus'); /* Zombies are lame. Moar pirates pls! */
            break;
        }

        player.loadVideoById(videoId); // Start playing the video that matches the final personality type. 

    } else { // If the nextQuestion is not 'results' just display the next question in sequence. 

        document.getElementById(nextQuestion).style.display = "block"
    }

Answer 1

试试这个;）

 // Check that we are on the 'results' stage of the quiz, ie the final page. 
 if (document.getElementById("results").style.display == "block") {
   /* removed return from here as we want to execute code after this statement also. */
   loadYTPlayer();  

   var videoId = '';
   switch (finalResults) {
     case "Ninja":
       videoId = "d2iD_j1MrJc"; 
       console.log('Ninja: d2iD_j1MrJc')
       break;
     case "Robot":
       videoId = "B1BdQcJ2ZYY";
       console.log('Robot: B1BdQcJ2ZYY');
       break;  

     case "Pirate":
       videoId = "TzMbGPa-Vus";
       console.log('Pirate: TzMbGPa-Vus');
       break;

     case "Zombies":
       videoId = "TzMbGPa-Vus";
       console.log('ZombiePirates? TzMbGPa-Vus'); /* Zombies are lame. Moar pirates pls! */
       break;
   }
   player.loadVideoById(videoId);
 }
 }

从调用函数的地方传递return语句函数控制之后;

用双引号"non numeric value here"包裹非数字值;

Answer 2

尝试传递字符串：

player.loadVideoById("d2iD_j1MrJc");

根据结果，在测验结束时按ID加载不同的YouTube视频

2 个答案:

根据结果​​，在测验结束时按ID加载不同的YouTube视频

2 个答案:

根据结果，在测验结束时按ID加载不同的YouTube视频