2013-05-16 7 views
0

все Предположим, у меня есть такой кодпадение значения вниз не применяются

<!DOCTYPE html> 
    <html> 
    <head> 
    </head> 
    <body> 
    <script type="text/javascript" charset="utf-8"> 


    var figure = document.getElementById("tool"); 
    var selected = figure.options[figure.selectedIndex].value; 


    if(selected === "pencil"){ 
    alert("Like a pencil"); 
} 

if(selected === 'line'){ 
alert("Just drag and drop"); 
} 
if(selected === "rect"){ 
    alert("drag and drop for rect"); 
} 
    </script> 


    <p><label>Drawing tool: <select id="tool"> 
     <option value="pencil">Pencil</option> 
     <option value="rect">Rectangle</option> 
     <option value="line">Line</option> 
    </select></label></p> 

</body> 
</html> 

Почему, когда я изменить значение выпадающего списка он не реагирует? Может быть, я должен добавить OnChange? Но я не понимаю, как это работает ... Спасибо

+0

Ваш код выполняется один раз, когда страница загружается. Вам нужно посмотреть обработчики событий, в частности прослушивание события «change» в вашем случае. – Mathletics

ответ

1

Вы должны поместить этот код в слушателя событий, как:

figure.addEventListener('change', function(){  
    // your code... 
}); 

И положить скрипт в конце документа.

0

Вы должны добавить en event handler. Ваш текущий код запускается только один раз, когда страница загружается.

window.onload(function() { 
    document.getElementById("tool").addEventListener('change',toolChangeEventHandler); 
} 

function toolChangeEventHandler() { 
    if(this.value === "pencil"){ 
     alert("Like a pencil"); 
    } else if(this.value === "line"){ 
     alert("Just drag and drop"); 
    } else if(this.value === "rect"){ 
     alert("drag and drop for rect"); 
    } 
} 

Событие onload необходимо для обеспечения того, чтобы элемент существовал при попытке добавить прослушиватель событий.

0

Ваш код

var figure = document.getElementById("tool"); 
    var selected = figure.options[figure.selectedIndex].value; 


    if(selected === "pencil"){ 
    alert("Like a pencil"); 
} 

if(selected === 'line'){ 
alert("Just drag and drop"); 
} 
if(selected === "rect"){ 
    alert("drag and drop for rect"); 
} 

выполняется, когда страница загружается. Для EXEC этот код, когда выбор изменить, вы можете использовать слушатель событий (методы не являются одинаковыми во всех браузере), как описано выше, или установить функцию обратного вызова, как это (более простой для одного события):

<select id="tool" onchange="onSelectChange(this);">... 

Где onSelectChange - это функция:

<script type="text/javascript"> 
    var onSelectChange = function(elt) { 
     var selected = elt.options[elt.selectedIndex].value; 

     if(selected === "pencil"){ 
      alert("Like a pencil"); 
     } 
     if(selected === 'line'){ 
      alert("Just drag and drop"); 
     } 
     if(selected === "rect"){ 
      alert("drag and drop for rect"); 
     } 
    }; 
</script> 
Смежные вопросы