Запустите функцию js onchange ()

0

Это кажется простой проблемой, но я не понимаю, почему она не работает для меня. У меня есть выпадающее меню и изображение. Изображение изменяется в зависимости от того, что выбрано в раскрывающемся меню, но я не понимаю, почему моя функция не запускается.

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

и 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>

Функция не меняет изображение, хотя

РЕДАКТИРОВАТЬ: пропущен какой-то переплет

  • 0
    В IE, если пользователь перемещается по опциям с помощью клавиш курсора, прослушиватель изменений будет вызываться при каждом изменении выбора. Другие браузеры будут ждать, пока выбранный параметр действительно изменится.
Теги:

6 ответов

2

Прекрасная демонстрация jsbin.com

Вы должны взять менее навязчивый подход

<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>

Затем в 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);
Поделиться
  • 0
    Короче: elem.addEventListener("change", updateImage)
  • 0
    @BlueSkies, который передал бы нежелательный аргумент event в моей функции updateImage . Обратите внимание, что я специально написал updateImage.call(this) а не updateImage.call(this, event) . Спасибо за обзор, хотя.
1

Вы должны скопировать условия в скобках:

if (selection.value == "Cpp")

..а также...

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

Если вы запустите свои инструменты для разработчиков, вы поймете, что ваш синтаксис неверен.. и взломать скрипт.

Поделиться
  • 0
    Да, я только что поймал этот, хотя он по-прежнему не меняет изображение после исправления
  • 0
    Помните, что без прямой косой черты / ваши пути относительно текущего каталога. Если папка с images находится в корне вашего сайта ... поставьте переднюю косую черту в начале. Например: /images/MobileQuizCapture.JPG .
0 
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";
            }
        }

забыл скобки?

Поделиться
0

Попробуйте эту скрипку:

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>
Поделиться
0

Спасибо за помощь, ребята, моя проблема была the->

if selection.value = cpp

вместо этого я пропустил скобки и цитаты

if(selection.value = "cpp")
Поделиться
0

Я предлагаю сохранить путь к изображению в качестве значения для параметра и использовать его для изменения изображения src. Ниже показано, как сделать это для фонового изображения, но его можно легко адаптировать для тега изображения.

Преимущество этого заключается в том, что вы можете просто добавить дополнительные опции для выбора, и они будут работать без необходимости изменения javascript.

установить фоновое изображение из выпадающего меню - 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);
    });
});

Вот сценарий JS, иллюстрирующий, как это сделать для ваших целей:

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

Поделиться
  • 0
    Я не вижу тега jQuery по этому вопросу. Значение элемента select никогда не должно быть ни нулевым, ни неопределенным, оно должно иметь только строковое значение (хотя это может быть пустая строка). Таким образом, единственный тест, который имеет какой-либо смысл, это img == '' . Было бы более разумно, если бы эта переменная имела имя вроде selectValue . О, атрибут src для элементов img является обязательным, поэтому удаление его создает недопустимую разметку, которая, вероятно, будет исправлена браузером, поэтому удаление его не кажется хорошей идеей.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню