Форум

lovi · #1 (**permalink**) 09.03.2014, 19:07

Хочу кросс-браузерность сделать.

1) Как "addEventListener('change',...)" заменить на "onChange"?

2) Если произвести такую замену, то полная кросс-браузерность получится или еще что-то поменять надо?

Не знаю(правила форума не нашел) можно ли тут выкладывать ссылки. На всякий случай и ссылку и сам код выложу. http://jsfiddle.net/bMSj5/2/

.passive {
    display: none;
}

.active {
    display: block;
}

<select id="select">
    <option>Number List</option>
    <option id="first">number 1</option>
    <option id="second">number 2</option>
    <option id="third">number 3</option>
</select>

<div>
    <div class="passive" id="first-i">number 1 content</div>
    <div class="passive" id="second-i">number 2 content</div>
    <div class="passive" id="third-i">number 3 content</div>
</div>

var select = document.getElementById('select'),
    curr = null;

select.addEventListener('change', function() {

    var name   = this.options[this.selectedIndex].getAttribute('id'),        
        target = document.getElementById(name + '-i');
    
    if (curr) curr.className = 'passive';
    if (target) target.className = 'active';
    curr = target;
});

danik.js · #2 (**permalink**) 09.03.2014, 19:14

Держи http://jsfiddle.net/9k8aF/
Также есть костыль (polyfill) для добавления addEventListener в IE8. Гугл в помощь.

lovi · #3 (**permalink**) 09.03.2014, 20:49

Сообщение от danik.js

Держи http://jsfiddle.net/9k8aF/

Спасибо. Но я когда этот код c "jsfiddle.net" переношу к себе на компьютер в index.html , то он не работает.

Как правильно его перенести?

index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style type="text/css">
            .passive { display: none;  }
            .active  { display: block; }
        </style>

        <script type="text/javascript">
            var select = document.getElementById('select'),
                curr = null;

            select.onchange = function() {
                
                var name = this.value,        
                    target = document.getElementById(name + '-i');
    
                if (curr) curr.className = 'passive';
                if (target) target.className = 'active';
                curr = target;
            };
        </script>
    </head>
    <body>
        <select id="select">
            <option>Number List</option>
            <option id="first">number 1</option>
            <option id="second">number 2</option>
            <option id="third">number 3</option>
        </select>
        <div>
            <div class="passive" id="first-i">number 1 content</div>
            <div class="passive" id="second-i">number 2 content</div>
            <div class="passive" id="third-i">number 3 content</div>
        </div>
    </body>
</html>

danik.js · #4 (**permalink**) 09.03.2014, 21:00

я html правил. заменил id на value у опшнов.

lovi · #5 (**permalink**) 09.03.2014, 21:11

Сообщение от danik.js

я html правил. заменил id на value у опшнов.

Исправил. Все равно не работает http://lovi.myjino.ru/ . Вот исправленный код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style type="text/css">
            .passive { display: none;  }
            .active  { display: block; }
        </style>

        <script type="text/javascript">
            var select = document.getElementById('select'),
                curr = null;

            select.onchange = function() {
                
                var name = this.value,        
                    target = document.getElementById(name + '-i');
    
                if (curr) curr.className = 'passive';
                if (target) target.className = 'active';
                curr = target;
            };
        </script>
    </head>
    <body>
        <select id="select">
            <option>Number List</option>
            <option value="first">number 1</option>
            <option value="second">number 2</option>
            <option value="third">number 3</option>
        </select>
        <div>
            <div class="passive" id="first-i">number 1 content</div>
            <div class="passive" id="second-i">number 2 content</div>
            <div class="passive" id="third-i">number 3 content</div>
        </div>
    </body>
</html>

рони · #6 (**permalink**) 09.03.2014, 21:24

lovi,
нет элемента ещё на странице а вы уже его используите в скрипте

рони · #7 (**permalink**) 09.03.2014, 21:30

lovi,

window.onload = function() {
    //тут ваш код 
 }

http://learn.javascript.ru/onload-onerror#window-onload

http://jsfiddle.net тут это автоматом происходит

lovi · #8 (**permalink**) 09.03.2014, 22:13

Сообщение от рони

lovi,

window.onload = function() {
    //тут ваш код 
 }

Спс. Понятно. Захотел красивее оформить и прочитал про defer. Но почему-то не получилось http://lovi.myjino.ru/ . Подскажите плиз как с defer написать?

index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style type="text/css">
            .passive { display: none;  }
            .active  { display: block; }
        </style>

        <script type="text/javascript" src="/metro.js" defer>
        </script>
    </head>
    <body>
        <select id="select">
            <option>Number List</option>
            <option value="first">number 1</option>
            <option value="second">number 2</option>
            <option value="third">number 3</option>
        </select>
        <div>
            <div class="passive" id="first-i">number 1 content</div>
            <div class="passive" id="second-i">number 2 content</div>
            <div class="passive" id="third-i">number 3 content</div>
        </div>
    </body>
</html>

metro.js:

var select = document.getElementById('select'),
                curr = null;

            select.onchange = function() {
                
                var name = this.value,        
                    target = document.getElementById(name + '-i');
    
                if (curr) curr.className = 'passive';
                if (target) target.className = 'active';
                curr = target;
            };

рони · #9 (**permalink**) 09.03.2014, 22:29

Сообщение от lovi

Спс. Понятно. Захотел красивее оформить и прочитал про defer. Но почему-то не получилось

что понятно то? если вы metro.js ничего ненаписали из того что вам показали
... непереводимый русский фольклор ...
metro.js:

window.onload = function() { 


   var select = document.getElementById('select'),
                curr = null;

            select.onchange = function() {
                
                var name = this.value,        
                    target = document.getElementById(name + '-i');
    
                if (curr) curr.className = 'passive';
                if (target) target.className = 'active';
                curr = target;
            };



 }

рони · #10 (**permalink**) 09.03.2014, 22:33

lovi,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
   <style type="text/css">
            .passive { display: none;  }
            .active  { display: block; }
        </style>
  <meta charset="utf-8">
  <script>
    window.onload = function() {
    var select = document.getElementById('select'),
                curr = null;
            select.onchange = function() {
                var name = this.value,
                    target = document.getElementById(name + '-i');
                if (curr) curr.className = 'passive';
                if (target) target.className = 'active';
                curr = target;
            };
 }
  </script>
</head>

<body>
    <select id="select">
            <option>Number List</option>
            <option value="first">number 1</option>
            <option value="second">number 2</option>
            <option value="third">number 3</option>
        </select>
        <div>
            <div class="passive" id="first-i">number 1 content</div>
            <div class="passive" id="second-i">number 2 content</div>
            <div class="passive" id="third-i">number 3 content</div>
        </div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript