Question

In JavaScript how do you make it so that a function is ready to change at any moment? I want to make it so that when someone selects a different option from a drop down form an image for that selected type will appear. Such as something like this:

        newTexture(document.worktopForm.worktopColour.value);
    
    function newTexture() {
            var textureName = '<img src="'document.worktopForm.worktopColour.value'.jpg>';
            document.getElementById("texture").innerHTML += textureName;        
    }


        <form name="worktopForm">
    
        <label>Choose colour of Worktop (Please select one)</label><br/>
        <select name="worktopColour">
            <option value="none" selected></option>
            <option value="starGalaxy">Star Galaxy (££)</option>
            <option value="tanBrown">Tan Brown (£££)</option>
            <option value="coolColour">Cool Colour (££££)</option>
            <option value="nutYellow">Nut Yellow (£££££)</option>
        </select>
    
        <div id="texture"></div></form>

Answer 1

You can call any function on onchange event of select

 <select id="worktopColour" onchange="newTexture();">


 function newTexture() {
        var textureName = document.getElementById("worktopColour");
        var  imagevalue=textureName.options[textureName.selectedIndex].value;        
 }

Use imagevalue variable.