Как "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; }); |
Держи http://jsfiddle.net/9k8aF/
Также есть костыль (polyfill) для добавления addEventListener в IE8. Гугл в помощь. |
Цитата:
Как правильно его перенести? 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> |
я html правил. заменил id на value у опшнов.
|
Цитата:
<!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> |
lovi,
нет элемента ещё на странице а вы уже его используите в скрипте |
lovi,
window.onload = function() { //тут ваш код } http://learn.javascript.ru/onload-onerror#window-onload http://jsfiddle.net тут это автоматом происходит |
Цитата:
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; }; |
Цитата:
... непереводимый русский фольклор ... 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; }; } |
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> |
Часовой пояс GMT +3, время: 02:45. |