onChange() не работает на сервере, но отлично работает на jsfiddle?

Сравните код на

jsfiddle

HTML

<select name="client_select" id="client_select">
<option value="Name not listed">Name not listed</option>
<option value="1">abc company</option>
</select>
<span id="client_add"><input type="text" name ="" value="field1"/></span>

Javascript

document.getElementById("client_select").onchange = 
function (e) {
if (this.value == 'Name not listed') {
    document.getElementById("client_add").style.display="";
    } else {
        document.getElementById("client_add").style.display="none";    
    }
};

to

мой сайт

<script>
document.getElementById("client_select").onchange = 
function (e) {
    if (this.value == 'Name not listed') {
        document.getElementById("client_add").style.display="";
    } else {
document.getElementById("client_add").style.display="none";    
    }
};
</script>
<select name="client_select" id="client_select">
<option value="Name not listed">Name not listed</option>
    <option value="1">abc company</option>
</select>
<span id="client_add"><input type="text" name ="" value="field1"/></span>

Решение:

Запустите javascript после того, как элементы будут загружены в DOM клиента.

Выполните одно из следующих:

  • Загружать javascript ПОСЛЕ html-элементов

  • Используйте onLoad() для переноса скрипта

  • С jQuery используйте $(document).ready(function() {}


dependencies javascript html onchange jsfiddle
person logo3801    schedule 06.05.2014    source источник
comment
Мне не хватает каких-либо зависимостей, которые jsfiddle имеет по умолчанию? Я проверил, и jsfiddle, похоже, ничего не включает.   -  person logo3801    schedule 06.05.2014
comment
Объект не был загружен в DOM, когда я пытался найти его с помощью Javascript. Скрипт решения после элементов.   -  person logo3801    schedule 06.05.2014

Ответы (2)


arrow_upward
1
arrow_downward

Элемент недоступен, когда вы пытаетесь его использовать, так как он еще не загружен в DOM.

Переместите скрипт после элементов

<select name="client_select" id="client_select">
    <option value="Name not listed">Name not listed</option>
    <option value="1">abc company</option>
</select>
<span id="client_add"><input type="text" name ="" value="field1"/></span>

<script>
    document.getElementById("client_select").onchange = function(e) {
        if (this.value == 'Name not listed') {
            document.getElementById("client_add").style.display = "";
        } else {
            document.getElementById("client_add").style.display = "none";
        }
    };
</script>

Я также рекомендую использовать addEventListener.

person adeneo    schedule 06.05.2014

arrow_upward
1
arrow_downward

Простое решение — обернуть ваш скрипт функцией window.onload, например:

window.onload = function(){
    // Do things here...
};

Или, если jQuery доступен:

$(function(){
    // Do things here...
});
person ncksllvn    schedule 06.05.2014
comment
да, спасибо, с jquery $(document).ready(function() { } даже лучше - person logo3801; 06.05.2014
comment
^^^ не совсем -› stackoverflow.com/questions/196702/ - person adeneo; 06.05.2014
comment
ооооо ¯\_(ツ)_/¯ Спасибо! - person logo3801; 06.05.2014