ドロップダウンメニューでiFrameを変更する

Question

私はプログラミングが初めてで、いくつかのことを試しています。 現時点では物事は止まっています。私は現時点でウェブページを作っています。 私が現時点で達成したいのは、ドロップダウンメニューのアイテムをクリックすると、iFrameソースが必要なリンクに変更されるということです。私はここで間違って何をしていますか？

<div class="dropdown droplist"> 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" 
     aria-expanded="false"> 
     Choose List 
    </button> 
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
     <a class="dropdown-item" href="#" id="#action-1">Party</a> 
     <a class="dropdown-item" href="#">Furutre</a> 
     <a class="dropdown-item" href="#">Late Night</a> 
    </div> 
</div> 
<script> 
    jQuery("#action-1").click(function (e) { 
     function switchView() { 
      document.getElementById("spotifycontainer").src = 
       'https://open.spotify.com/embed/user/21sbumll6xursi72kr7vkspay/playlist/4VEIFU2doL7TdnolXXFd70'; 
     } 
     e.preventDefault(); 
    }); 
</script> 
<div> 
    <iframe src="" class="spotifylist" width="1280" height="720" frameborder="0" allowtransparency="true" id="spotifycontainer"> 
    </iframe> 
</div> 

Answer 1

jQueryをインポートせずに使用しようとしているようです。
便利なエラーメッセージを確認するには、必ずコンソールを開いてください。

あなたは次にあなたがこの

function switchView(mode){ 
    let spotifyContainer = document.getElementById("spotifycontainer"); 

    if (mode == 'party'){ 
    spotifyContainer.src='https://open.spotify.com/embed/user/21sbumll6xursi72kr7vkspay/playlist/4VEIFU2doL7TdnolXXFd70'; 
    } 
    if (mode == 'future'){ 
    spotifyContainer.src = 'https://open.spotify.com/embed/user/21sbumll6xursi72kr7vkspay/playlist/4VEIFU2doL7TdnolXXFd70'; 
    } 
}