Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.05.2012, 11:52
Новичок на форуме
Отправить личное сообщение для Nickolas Посмотреть профиль Найти все сообщения от Nickolas
 
Регистрация: 24.04.2012
Сообщений: 3

Обработчики событий
Доброго времени суток!
Друзья, помогите новичку разобраться. Вопрос такой: через циклы на страницу добавляются 2 набора кнопок. Не могу понять как идентифицировать конкретную кнопку из набора. Тоесть, как добавить обработчики событий для каждой из кнопок? Смысл в том, чтобы, к примеру, при нажатии на любую из кнопок первого набора она оборачивалась в тэг div, а при нажатии на любую кнопку из второго набора - в тэг pre. Извините за сумбурность. Заранее спасибо.

function addNewButts1() {
				var i=1;
				while (i<=5) {
				createNewButt1();
				i++;
				}
			}
			
			function addNewButts2() {
				var i=1;
				while (i<=5) {
				createNewButt2();
				i++;
				}
			}
						
			function createNewButt1() {
				var parent = document.getElementsByTagName('body')[0];
				var newButt1 = document.createElement('input');
				newButt1.type = 'button';
				newButt1.value = 'Change Button';
				newButt1.id = 'butt1';
				parent.appendChild(newButt1);
			}
			
			function createNewButt2() {
				var parent = document.getElementsByTagName('body')[0];
				var newButt2 = document.createElement('input');
				newButt2.type = 'button';
				newButt2.value = 'Wrap Button';
				newButt2.id = 'butt2';
				parent.appendChild(newButt2);
			}
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2012, 12:51
Профессор
Отправить личное сообщение для bot87 Посмотреть профиль Найти все сообщения от bot87
 
Регистрация: 16.05.2011
Сообщений: 307

ты ведь создаешь элементы с одинаковым id!Это против правил
newButt1.id = 'butt1';.
Можно как вариант такое
function createNewButt2(j) {
              
                newButt2.id = 'butt2'+j;
               
            }


function addNewButts1() {
	                var i=1;
	                while (i<=5) {
	                createNewButt1(i);
	                i++;
	                }
__________________
Я только учусь.Ногами просьба не бить

Последний раз редактировалось bot87, 18.05.2012 в 13:03.
Ответить с цитированием
  #3 (permalink)  
Старый 18.05.2012, 13:20
Профессор
Отправить личное сообщение для bot87 Посмотреть профиль Найти все сообщения от bot87
 
Регистрация: 16.05.2011
Сообщений: 307

вот тебе часть рулона
<script>
function handler(e){
div1=document.createElement('div')
div1.appendChild(this)
document.body.appendChild(div1)
//this.parentNode.removeChild(this)
}
function handler2(e){
alert('2')	
}

function addNewButts1() {
                var i=1;
                while (i<=5) {
                createNewButt1(i);
                i++;
                }
            }
             
            function addNewButts2() {
                var i=1;
                while (i<=5) {
                createNewButt2(i);
                i++;
                }
            }
                         
            function createNewButt1(i) {
                var parent = document.getElementsByTagName('body')[0];
                var newButt1 = document.createElement('input');
                newButt1.type = 'button';
                newButt1.value = 'Change Button';
              newButt1.id = 'butt1'+i;
                parent.appendChild(newButt1);
            }
             
            function createNewButt2(j) {
                var parent = document.getElementsByTagName('body')[0];
                var newButt2 = document.createElement('input');
                newButt2.type = 'button';
                newButt2.value = 'Wrap Button';
                newButt2.id = 'butt2'+j;
                parent.appendChild(newButt2);
            }
			addNewButts1()
			addNewButts2()
			reg1=/butt1/
			reg2=/butt2/
			inputs=document.getElementsByTagName('input')
			
			
			
eventType = document.addEventListener ? ["addEventListener", ""] : ["attachEvent", "on"];
			
			
			for(k=0;k<inputs.length;k++){
				if(reg2.test(inputs[k].getAttribute('id'))){
				//inputs[k].addEventListener('click',handler,false)
				inputs[k][ eventType[ 0 ] ]( eventType[ 1 ] + "click", function( e ){
        e = e || window.event;
        handler.call( e.target || e.srcElement, e );
    }, false );
				}else{
					
					inputs[k][ eventType[ 0 ] ]( eventType[ 1 ] + "click", function( e ){
        e = e || window.event;
        handler2.call( e.target || e.srcElement, e );
    }, false );
				}
			}
			
			
</script>
.Не могу удалить кнопку
__________________
Я только учусь.Ногами просьба не бить

Последний раз редактировалось bot87, 18.05.2012 в 13:34.
Ответить с цитированием
  #4 (permalink)  
Старый 18.05.2012, 21:25
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

На мой взгляд, группу кнопок лучше сразу помещать в блок (div, span,...), хотя бы для того, чтобы на него, при необходимости, повесить один обработчик (а не на все элементы по обработчику).
Кнопки также можно добавлять строкой в innerHTML.

Думаю из этого примера можно понять о чём речь.

<style>
  pre {background: green} /*когда обернётся фон станет зелёным*/
</style>

<input type="button" value="+"  onclick="create('pre wrap', 5, 'pre')">

<script>
function create (name, amount, wrapping) {
  //добавляем новый блок 
  var newDiv = document.createElement('div');
  document.body.appendChild(newDiv);

  //назначаем ему обработчик
  newDiv.onclick = function () {
    newDiv.innerHTML = '<' + wrapping + '>' + newDiv.innerHTML + '</' + wrapping + '>'; 
    alert(newDiv.innerHTML); //для посмотра, что получилось
  };

  //добавляем кнопки в блок
  var  str = '<input type="button" value="' + name + '" >';

  for (var i = 0; i < amount; i++) {
    newDiv.innerHTML += str;
  }

}
</script>

Последний раз редактировалось bes, 18.05.2012 в 21:29.
Ответить с цитированием
  #5 (permalink)  
Старый 19.05.2012, 08:50
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Да и наверное innerHTML лучше в цикле не гонять.

<style>
  pre {background: green} /*когда обернётся, фон станет зелёным*/
</style>

<input type="button" value="+"  onclick="create('pre wrap', 5, 'pre')">

<script>
function create (name, amount, wrapping) {
  //добавляем новый блок 
  var newDiv = document.createElement('div');
  document.body.appendChild(newDiv);

  //назначаем ему обработчик
  newDiv.onclick = function () {
    newDiv.innerHTML = '<' + wrapping + '>' + newDiv.innerHTML + '</' + wrapping + '>'; 
    alert(newDiv.innerHTML); //для посмотра, что получилось
  };

  //добавляем кнопки в блок
  var  butStr = '<input type="button" value="' + name + '" >';
  var str = '';

  for (var i = 0; i < amount; i++) {
    str += butStr;
  }

  newDiv.innerHTML = str;

}
</script>
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Drag'n'drop обработчики событий zaytsewa Общие вопросы Javascript 7 27.06.2011 14:32
DOM и обработчики событий radmir4eg Events/DOM/Window 7 31.03.2011 11:52
Скопировать обработчики событий с одного элемента на другой. Jurasmi Events/DOM/Window 3 10.11.2010 19:03
Фильтры IE и обработчики событий IE6 mexoboy Internet Explorer 6 25.05.2010 16:51