'Need Help Assigning Images to Variables Using JavaScript, And Using A form to Select Certain Images

    <center><form class="myfavs">
        <h3>First Favourite</h3>
        <select name="firstfav" id="firstfav">
            <option value="Bahamas">Bahamas</option>
            <option value="Barts">Barts</option>
            <option value="BoraBora">BoraBora</option>
            <option value="Belize">Belize</option>
            <option value="Fiji">FijiBig</option>
            <option value="Maldives">Maldives</option>
            <option value="Mexico">Mexico</option>
            <option value="Hawaii">Hawaii</option>
            <option value="Taki">Taki</option>
            <option value="Syshell">Syshell</option>
        </select>
        <h3>Second Favourite</h3>
        <select name="secondfav" id="secondfav">
            <option value="Bahamas">Bahamas</option>
            <option value="Barts">Barts</option>
            <option value="BoraBora">BoraBora</option>
            <option value="Belize">Belize</option>
            <option value="Fiji">FijiBig</option>
            <option value="Maldives">Maldives</option>
            <option value="Mexico">Mexico</option>
            <option value="Hawaii">Hawaii</option>
            <option value="Taki">Taki</option>
            <option value="Syshell">Syshell</option>
        </select>

        <button onchange="addfav();" type="button" name="enter" id="enter">Enter</button>
    </form></center>
    <h1> Favorites </h1>
    <div class="Favs">
        <img id="Fav1" width="250" height="250">
        <img id="Fav2" width="250" height="250">
        <img id="Fav3" width="250" height="250">
        <img id="Fav4" width="250" height="250">
        <img id="Fav5" width="250" height="250">
    </div>

function addfav() {

//Assigning And Creating Variables For Favourite Images
var Fav1 = documemt.getElementById("Fav1");
var Fav2 = documemt.getElementById("Fav2");
var Fav3 = documemt.getElementById("Fav3");
var Fav4 = documemt.getElementById("Fav4");
var Fav5 = documemt.getElementById("Fav5");

var firstfav = document.getElementById("firstfav");
var secondfav = document.getElementById("secondfav");
var thirdfav = document.getElementById("thirdfav");
var fourthfav = document.getElementById("fourthfav");
var fithfav = document.getElementById("fithfav");

var Bahamas = document.createElement("img");
Bahamas.src = "Images/BahamasBig.jpg";

if (firstfav.value = "Bahamas"){
    document.body.appendChild(Bahamas);
    document.querySelector(".Favs").appendChild(Bahamas);
    document.getElementById("Fav1").appendChild(Bahamas);
}

}

I'm trying to figure out how I can designate images to fill in my class favs, based on the selections made via the form after the button enter is pressed. I'm new to this and I'm very stuck as I've never worked with images through java script before



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source