Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.03.2014, 19:07
Новичок на форуме
Отправить личное сообщение для lovi Посмотреть профиль Найти все сообщения от lovi
 
Регистрация: 09.03.2014
Сообщений: 6

Как "addEventListener('change',...)" заменить на "onChange"?
Хочу кросс-браузерность сделать.

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;
});
Ответить с цитированием
  #2 (permalink)  
Старый 09.03.2014, 19:14
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Держи http://jsfiddle.net/9k8aF/
Также есть костыль (polyfill) для добавления addEventListener в IE8. Гугл в помощь.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 09.03.2014, 20:49
Новичок на форуме
Отправить личное сообщение для lovi Посмотреть профиль Найти все сообщения от lovi
 
Регистрация: 09.03.2014
Сообщений: 6

Сообщение от 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>
Ответить с цитированием
  #4 (permalink)  
Старый 09.03.2014, 21:00
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

я html правил. заменил id на value у опшнов.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 09.03.2014, 21:11
Новичок на форуме
Отправить личное сообщение для lovi Посмотреть профиль Найти все сообщения от lovi
 
Регистрация: 09.03.2014
Сообщений: 6

Сообщение от 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

lovi,
нет элемента ещё на странице а вы уже его используите в скрипте
Ответить с цитированием
  #7 (permalink)  
Старый 09.03.2014, 21:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

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

http://jsfiddle.net тут это автоматом происходит
Ответить с цитированием
  #8 (permalink)  
Старый 09.03.2014, 22:13
Новичок на форуме
Отправить личное сообщение для lovi Посмотреть профиль Найти все сообщения от lovi
 
Регистрация: 09.03.2014
Сообщений: 6

Сообщение от рони Посмотреть сообщение
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от 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;
            };



 }

Последний раз редактировалось рони, 09.03.2014 в 22:40.
Ответить с цитированием
  #10 (permalink)  
Старый 09.03.2014, 22:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как заменить тексты ссылок текстами из тегов span при нажатии All_ex74 Элементы интерфейса 13 28.08.2014 08:16
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
Как заменить текст на Javascript Hasanaga999 AJAX и COMET 3 28.01.2013 10:45
Как заменить встроенную функцию Alert? KIVagant Общие вопросы Javascript 4 22.04.2010 11:13
Как заменить эл-ты одного списка эл-тами другого ? Mayar Элементы интерфейса 5 28.04.2009 11:21