Changing iFrame on dropdown click

user_9004097 0
Viewed 183

I'm new to programming and I'm trying out some stuff. The thing is now im stuck at the moment, I'm making a webpage at the moment. What I want to achieve at the moment is that if I click an item in the drop down menu it changes the iFrame source to the link I want. what am i doing wrong here?

 <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>
bootstrap-4 html javascript
1 Answers

It seems you are trying to use jQuery without importing it.
Always be sure to open the console to check for handy error messages.

You can use onClick in your html to call a JS function like this

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#" onClick="switchView('party')">Party</a>
    <a class="dropdown-item" href="#" onClick="switchView('future')">Furutre</a>
    <a class="dropdown-item" href="#" onClick="switchView('lateNight')">Late Night</a>
</div>

Then you can create a switchView method that looks like this

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';
    }
}
user_63720420
Related