Форум

bes · #11 (**permalink**) 13.07.2012, 13:53

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

в innerHTML входит все что видно нам по alert(document.body.innerHTML)
таким образом все обработчики которые мы сделали скриптами там не видны и не войдут в страницу когда мы будем использовать innerHTML+ а войдут только те обработчики которые мы написали на странице

Вот это совсем не понял, все обработчики как раз входят в исходный текст страницы (если бы не входили, не сработал бы обработчик клика у самого body, а он срабатывает)

<body>
<button id="button">click</button><br>
<script>
document.body.onclick = function () {
  document.body.innerHTML +=  'text<br>';
  alert(document.body.innerHTML);
}
document.getElementById('button').onclick = function () {
  alert('click')
}
</script>
</body>

oneguy · #12 (**permalink**) 13.07.2012, 14:00

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

но лучше с помощью appendChild

Написал свой код, используя documentFragment - может быть, поможет.

<!DOCTYPE html>

<html><head><title></title></head><body>

<script type="text/javascript">
var user = [[1,'name1', 'lastname1', 'vozrast1'],[2, 'name2', 'lastname2', 'vozrast2'],[3, 'name3', 'lastname3', 'vozrast3']];
var frag=document.createDocumentFragment(), cns=frag.childNodes;
for (var i=0; i<user.length; i++) {
  frag.appendChild(document.createTextNode(""));
  frag.appendChild(document.createElement("br"));
}
function fff(i) {
  function sName(a, b) {
    if (a[i] > b[i]) return 1;
    else if (a[i] < b[i]) return -1;
    else return 0;
  }
  user.sort(sName);
  for (i=0; i<user.length; i++)
    cns[2*i].textContent=user[i];
  document.getElementById("result").appendChild(frag.cloneNode(true));
}
</script>
<a href="#" onClick="fff(0)">id</a>
<a href="#" onClick="fff(1)">name</a>
<a href="#" onClick="fff(2)">lastname</a>
<a href="#" onClick="fff(3)">vozrast</a>
<div id="result"></div>

</body></html>

vadim5june · #13 (**permalink**) 13.07.2012, 14:14

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

Вот это совсем не понял, все обработчики как раз входят в исходный текст страницы (если бы не входили, не сработал бы обработчик клика у самого body, а он срабатывает)

Я так это понимаю
когда выполнился первый раз скрипт то у нас появилось два обработчика на элементах body и button
эти обработчики не здесь на странице располагаются а записываются во внутренние таблицы интерпретатора javascript
когда мы выполняем команду innerHTML+ то элемент body не трогаем так как только внутри меняем а элемент button заменяем на новый но при этом указатель обработчика указывает на старый button(который у нас удалился) и не срабатывает
но еще мы перезаписываем снова тот же скрипт-но он не выполняется-поэтому события не перепишутся

bes · #14 (**permalink**) 13.07.2012, 14:45

Да, это наверное может объяснить ситуацию: при изменении содержимого body всё, что в тегах <script></script> внутри этого body заново не анализируется.
Решением может стать переназначение обработчиков (ну или как уже сказали не стоит это вообще использовать).

<body>
<button id="button">click</button><br>
<script>
document.body.onclick = function () {
  document.body.innerHTML +=  'text<br>';
  document.getElementById('button').onclick = function () {
   alert('click')
  }
}
document.getElementById('button').onclick = function () {
  alert('click')
}
</script>
</body>

vadim5june · #15 (**permalink**) 13.07.2012, 15:25

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

Написал свой код, используя documentFragment - может быть, поможет.

Да это правильный подход я считаю
inerrHTML+ лучше не использовать

f-mobile · #16 (**permalink**) 14.07.2012, 20:25

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

document.body.innerHTML+=user[0]+"<br>"+user[1]+"<br>"+user[2];

но лучше с помощью appendChild

с этом document.body.innerHTML+=user[0]+"<br>"+user[1]+"<br>"+user[2];нормально работает, но каждый раз нажатие кнопки еще +добавляется user[0]+"<br>"+user[1]+"<br>"+user[2]. значить reset; неправильно подставил?, место его чего использовать можно?

vadim5june · #17 (**permalink**) 14.07.2012, 20:30

попробуй так после
<a href="#" onClick="fff(3)">vozrast</a>
добавь
<div id="d1"></div>
и в скрипте

document.getElementById('d1').innerHTML=user[0]+"<br>"+user[1]+"<br>"+user[2];

f-mobile · #18 (**permalink**) 14.07.2012, 21:03

пробовал не получается
<div id="d1">
<a href="#" onClick="fff(0)">id</a>
<a href="#" onClick="fff(1)">name</a>
<a href="#" onClick="fff(2)">lastname</a>
<a href="#" onClick="fff(3)">vozrast</a>
</div>

<script type="text/javascript">

var user = [[1,'name1', 'lastname1', 'vozrast1'],[2, 'name2', 'lastname2', 'vozrast2'],[3, 'name3', 'lastname3', 'vozrast3']];
function fff(i){

function sName(a, b) {
if (a[i] > b[i]) return 1;
else if (a[i] < b[i]) return -1;
else return 0;
}user.sort(sName);
document.getElementById('d1').innerHTML+=user[0]+"<br>"+user[1]+"br>"+user[2];
reset;
}
</script>

vadim5june · #19 (**permalink**) 14.07.2012, 21:08

Сообщение от f-mobile

пробовал не получается
<div id="d1">
<a href="#" onClick="fff(0)">id</a>

надо так
<div id="d1"></div>
<a href="#" onClick="fff(0)">id</a>

f-mobile · #20 (**permalink**) 14.07.2012, 21:13

так и не получилось

Форум

Справочник

Discord чат

Курсы javascript