innerHTML не работает правильно
Доброго времени суток. Подскажите пожалуйста. Есть событие при нажатии на div блок. Событие создает пустой массив и раздувает его длину с шагом в единицу до 50, при этом после каждого шага записывает в этот див текущую длину массива.
<div id="status" onclick="qwerty()"style="border:1px solid red; width:165px; height:22px; position:absolute; left: 276px; top: 44px; background-color: #66FF99;"></div> <script> function qwerty(){ var massiv = [] for (var u=0; u<=50; u++){ massiv.push(u) document.getElementById('status').innerHTML=u //alert(u) } } </script>Но беда в том, что на самом деле скрипт записывает длину массива в div блок всего один раз - как раз по окончанию раздувания. Поначалу подумал, что перезапись происходит так быстро, что просто не успеваешь посмотреть все предыдущие 49 значений. Но если поставить длину массива не 50, а на порядки побольше - то все равно увидится только окончательная длинна. Почему так? Разве скрипт не должен переписать значение прежде чем продолжить раздувание длины? Если вставить строку alert(u), чтобы скрипт остановился и выдал сообщение, то будет видно что в таком случае innerHTML переписывает значение. А как это сделать без alert ? Потом я пытался решить проблему по другому - поставить тайминг на цикл. Подумал, что скрипт спешит все сделать побыстрее и не заморачивается всякими там перезаписями, и что если установить тайминг он перепишет значение во время ожидания. Но куда бы я этот setTimeout не запихивал, скрипт чхает на него и все равно делает все очень быстро и по своему. Подскажите, как увидеть реальный ход раздувания массива? Как заставить скрипт переписывать значение? |
фонарик,
цирк!!! <!DOCTYPE HTML> <html> <head> <title></title> </head> <body> <div id="status" onclick="qwerty()"style="border:1px solid red; width:165px; height:22px; position:absolute; left: 276px; top: 44px; background-color: #66FF99;"></div> <script> function qwerty(){ var massiv = [] for (var u=0; u<=50; u++){ massiv.push(u) document.getElementById('status').innerHTML+=u } } </script> </body> </html> <!DOCTYPE HTML> <html> <head> <title></title> </head> <body> <div id="status" onclick="qwerty(0)"style="border:1px solid red; width:165px; height:22px; position:absolute; left: 276px; top: 44px; background-color: #66FF99;"></div> <script> var massiv = [] function qwerty(u){ document.getElementById('status').innerHTML=u++ massiv.push(u) u <= 50 && window.setTimeout(function () { qwerty(u) },500) } </script> </body> </html> |
Цитата:
Спасибо за подсказку :thanks: |
Как ни печально, но почему-то кругом одни грабли. Если мне нужно из другой функции (pre_qwerty) брать по очереди значения из массива DATAarrID и заставлять функцию qwerty() писать пришедшее значение в блок? В данном примере получился бесконечный цикл :(
<div id="status" onclick="pre_qwerty()" style="displayborder:1px solid red; vertical-align:middle; min-width:10px; width:auto; height:18px; position:absolute; left: 76px; top: 44px; background-color: #66FF99;"></div> <script> var DATAarrID = ['ноль','раз','два','три','четыре','пять','шесть','семь','восемь','девять'] </script> <div id="status" onclick="pre_qwerty()" style="border:1px solid red; min-width:50px; width:auto; min-height:18px; height:auto; position:absolute; left: 76px; top: 44px; background-color: #66FF99;"></div> <script> var DATAarrID = ['ноль','раз','два','три','четыре','пять','шесть','семь','восемь','девять'] </script> <script> var txt = document.getElementById('status').innerHTML; function qwerty(u){ var txt = document.getElementById('status').innerHTML; document.getElementById('status').innerHTML=txt+u+', ' DATAarrID.indexOf(u) <= DATAarrID.length && window.setTimeout(function (){qwerty(u)},1000) } </script> <script> function pre_qwerty(){ for(var i=0; i<DATAarrID.length; i++) { var X = DATAarrID[i] qwerty(X)} } </script> |
фонарик,
id одинаковые плюс, див наложен на див, забавное свойство стиля, сама задача нечётко сформулирована. |
Прошу прощения за невнимательность, голова совсем зависла пока я пытался разобраться, переутомился видимо и вставил тект задачи не так и не туда. Вот, все поправил.
<div id="status" onclick="pre_qwerty()" style="border:1px solid red; min-width:50px; width:auto; min-height:18px; height:auto; position:absolute; left: 76px; top: 44px; background-color: #66FF99;"></div> <script> var DATAarrID = ['ноль','раз','два','три','четыре','пять','шесть','семь','восемь','девять'] </script> <script> var txt = document.getElementById('status').innerHTML; function qwerty(u){ var txt = document.getElementById('status').innerHTML; document.getElementById('status').innerHTML=txt+u+', ' DATAarrID.indexOf(u) <= DATAarrID.length && window.setTimeout(function (){qwerty(u)},500) //задержка 500 если текущий номер значения в массиве меньше его длины, но не работает } </script> <script> function pre_qwerty(){ for(var i=0; i<DATAarrID.length; i++) { var X = DATAarrID[i] qwerty(X)} } </script> При нажатии на блок див вызывается функция pre_qwerty(), которая берет по очереди значения из массива DATAarrID, передает значение функции qwerty(), которая, получая очередное значение, должна написать его в этот самый блок див. Необходимо установить тайминг как в вашем первом ответе, чтобы функция qwerty() в итоге после окончания одного своего цикла печатала полученное значение в блок с задержкой в 100 миллисекунд. Т.е оптически обозримо в блоке див последовательно должен напечататься массив DATAarrID. |
Можно ли как-нибудь воочию посмотреть как происходит обработка скриптов? Что обрабатывается после чего, так сказать. У меня складывается впечатление, что в таком раскладе без сильных хитростей не обойтись, и ещё мне стало казаться что функция qwerty() получает не по 1 значению для обработки, а сразу все значения из массива, поэтому никакой интервал в этой функции и не работает :(
|
фонарик,
Зачем вы цикл суете, если вам показали пример на таймауте, и там не было цикла ? <div id="status" onclick="pre_qwerty(0)" style="border:1px solid red; min-width:50px; width:auto; min-height:18px; height:auto; position:absolute; left: 76px; top: 44px; background-color: #66FF99;"></div> <script> var DATAarrID = ['ноль','раз','два','три','четыре','пять','шесть','семь','восемь','девять'] </script> <script> var txt = document.getElementById('status').innerHTML; function qwerty(u){ var txt = document.getElementById('status').innerHTML; document.getElementById('status').innerHTML=txt+u+', '; } </script> <script> function pre_qwerty(u){ var X = DATAarrID[u]; if (!X) return; qwerty(X); setTimeout(function() { pre_qwerty(++u); }, 500); } </script> |
walik, что-то вот основное не понимается и всё тут, в этом и все беды. Как я только не пробовал уже. А вот таймаут в первом скрипте делать почему-то не допетрил :-?
Спасибо вам за помощь, я уже 2 дня не мог решить эту задачу )) Можете сказать в вашем примере в 22 строке pre_qwerty(++u);что происходит на словах ? Увеличение на единицу переменной там плюсики в конце идут, а тут в начале :-? |
Не знаю как толком объяснить, но:
Если плюсики в конце, то идет в начале присваивание, а потом инкремент. var i = 0; alert(i++); // 0 alert(i); // 1 Если плюсики в начале ставить, то получается наоборот, в начале инкремент, потом присваивание: var i = 0; alert(++i); // 1 alert(i); // 1 Как то так. |
Часовой пояс GMT +3, время: 17:45. |