Javascript выбрать случайный вариант

Question

у меня есть проблемы с этим кодом:

HTML:

<div class="select"> 
    <select name="ipd" id="ipd"> 
     <option value="1">192.168.2.1</option> 
     <option value="2">192.168.2.2</option> 
     <option value="3">192.168.2.3</option> 
     <option value="4">192.168.2.4</option> 
     <option value="5">192.168.2.5</option> 
    </select> 
    <a href="#" onclick="myfunction()">Select random</a> 
</div> 

И JavaScript:

<script type="text/javascript"> 
function myfunction() { 
    var select = document.getElementById('ipd'); 
    var items = select.getElementsByTagName('option'); 
    var index = Math.floor(Math.random() * items.length); 

    select.selectedIndex = index; 
} 
</script> 

Когда я удалить функцию строки из JS и сделал код для запуска после загрузки сайта, он работает нормально. Но когда я пытаюсь использовать его в нем, это не сработает. Может кто-нибудь объяснить мне почему? Я пытаюсь немного отладить это и добавить функцию (индекс) к функции, и это верный правильный случайный индекс, но он ничего не выбирает.

Answer 1

Ваш код работает нормально ... пока он запущен до создания DOM.

JSFiddle

---

Если ваш скрипт получает побежал после того, как DOM будет создан, и вы не можете изменить, что по какой-то причине ... вы можете удалить OnClick в DOM, добавить ID на связать и сделать это таким образом, вместо этого:

JSFiddle

document.getElementById("randomSelect").addEventListener("click", function() { 
    var select = document.getElementById('ipd'); 
    var items = select.getElementsByTagName('option'); 
    var index = Math.floor(Math.random() * items.length); 
    select.selectedIndex = index; 
}); 

---

Кроме того, я заметил, что ты меченый JQuery, вы можете также использовать это ...

JSFiddle

$(document).ready(function() { 
    $("#randomSelect").click(function() { 
     var select = document.getElementById('ipd'); 
     var items = select.getElementsByTagName('option'); 
     var index = Math.floor(Math.random() * items.length); 
     select.selectedIndex = index; 
    }); 
}); 

Answer 2

При нажатии ссылки вы будете перезагружены, а также html. Таким образом, все изменения в доме будут потеряны. Вам нужно остановить загрузку страницы, вернув false.

<script type="text/javascript"> 
function myfunction() { 
var select = document.getElementById('ipd'); 
var items = select.getElementsByTagName('option'); 
var index = Math.floor(Math.random() * items.length); 

select.selectedIndex = index; 
return false; 
} 
</script>