CODEWITHSUNDEEP
javascripthtml
Centimane
Centimane

Reputation: 280

Run a js function onchange()

This seems like a simple problem, but I don't get why it's not working for me. I have a dropdown menu and image. The image changes based on what is selected in the dropdown menu, but I don't understand why my function isn't being triggered.

<select onchange="changeImage()" id="samples">
            <option value="Cpp">C++ Example</option>
            <option value="Mobile">Mobile Applications Example</option>
</select>

and the javascript

<script>
        function changeImage()
        {
            var selection = document.getElementById("samples");

            var image = document.getElementById("shown");

            if(selection.value == "Cpp")
            {
            image.src="images/CppCoursesCapture.JPG";
            }
            else if(selection.value == "Mobile")
            {
            image.src="images/MobileQuizCapture.JPG";
            }
        }
    </script>

The function doesn't change the image though

EDIT: missed some perenthesis

Upvotes: 0

Views: 347

Answers (6)

maček
maček

Reputation: 77778

A lovely jsbin.com demo

You should take a less obtrusive approach

<select id="samples">
  <option value="Cpp" data-image="images/CppCoursesCapture.JPG">C++ Example</option>
  <option value="Mobile" data-image="images/MobileQuizCapture.JPG">Mobile Applications Example</option>
</select>

Then in JavaScript

// implementation
function updateImage() {
  var selected = this.options[this.selectedIndex];

  var image = document.getElementById("shown");
  image.src = selected.getAttribute("data-image");
}

// target SELECT
var elem = document.getElementById("samples");

// change event
elem.addEventListener("change", function(event){
  updateImage.call(this);
});

// initialization
updateImage.call(elem);

Upvotes: 2

Zword
Zword

Reputation: 6793

Try this fiddle:

http://jsfiddle.net/yQBz7/1/

<script>
    function changeImage()
    {
        var selection = document.getElementById("samples");

        var image = document.getElementById("shown");

        if(selection.value == "Cpp")
        {
        image.innerHTML="<img src='http://www.techiesin.com/wp-content/uploads/2013/07/c-logo.jpg' />";
        }
        else if(selection.value == "Mobile")
        {
        image.innerHTML="<img src='http://www.truste.com/blog/wp-content/uploads/MobileAppDevelopments1.jpeg' />";
        }
    }
</script>

Upvotes: 0

Neaox
Neaox

Reputation: 1972

I suggest storing the path to the image as the value for the option and using that to change the image src. The following shows how to do this for a background image but it can be easily adapted for an image tag.

The advantage of doing it this way is that you can simply add more options to the select and they will work without needing to modify the javascript.

set background image from dropdown menu - javascript

<select id="samples">
    <option>Select an image</option>
    <option value="http://t2.gstatic.com/images?q=tbn:ANd9GcT-wQk0CTwl93EmiaUaoIjpMVmwHDNBz_7hN0UNpAz5DCWq66Sp-w">C++ Example</option>
    <option value="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg">Mobile Applications Example</option>
</select>
<img id="image" />


$(document).ready(function()
{
    var image = $('#image');
    $('#samples').bind('change', function(event){
        var img = $(this).val();
        if(img == null || typeof img === 'undefined' || $.trim(img) === '')
            image.removeAttr('src');
        else
            image.attr('src', img);
    });
});

Here is a JS fiddle illustrating how to do this for your purposes:

http://jsfiddle.net/hKBtp/5/

Upvotes: 0

Centimane
Centimane

Reputation: 280

Thanks for the help guys, my issue was the-> 

if selection.value = cpp

instead I missed the parenthesis and quotations

if(selection.value = "cpp")

Upvotes: 0

ProllyGeek
ProllyGeek

Reputation: 15836

function changeImage()
        {
            alert("Function Called");
            var selection = document.getElementById("samples");

            var image = document.getElementById("shown");

            if (selection.value == "Cpp")
            {
            image.src="images/CppCoursesCapture.JPG";
            }
            else if( selection.value == "Mobile")
            {
            image.src="images/MobileQuizCapture.JPG";
            }
        }

forgot brackets ?

Upvotes: 0

Simon Whitehead
Simon Whitehead

Reputation: 65079

You need to wrap your conditions in parenthesis:

if (selection.value == "Cpp")

..and...

else if (selection.value == "Mobile")

If you run your developer tools, it will pick up that your syntax is incorrect.. and breaking the script.

Upvotes: 1

Related Questions