15.03.2013, 01:07
|
|
Кандидат Javascript-наук
|
|
Регистрация: 23.02.2013
Сообщений: 127
|
|
|
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 не запихивал, скрипт чхает на него и все равно делает все очень быстро и по своему. Подскажите, как увидеть реальный ход раздувания массива? Как заставить скрипт переписывать значение?
|
|
15.03.2013, 01:23
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
фонарик,
цирк!!!
<!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>
|
|
15.03.2013, 01:31
|
|
Кандидат Javascript-наук
|
|
Регистрация: 23.02.2013
Сообщений: 127
|
|
Сообщение от рони
|
фонарик,
цирк!!!
|
А где же кино ? 
Спасибо за подсказку  |
|
15.03.2013, 04:18
|
|
Кандидат Javascript-наук
|
|
Регистрация: 23.02.2013
Сообщений: 127
|
|
Как ни печально, но почему-то кругом одни грабли. Если мне нужно из другой функции (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>
|
|
15.03.2013, 11:58
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
фонарик,
id одинаковые плюс, див наложен на див, забавное свойство стиля, сама задача нечётко сформулирована.
|
|
15.03.2013, 16:04
|
|
Кандидат Javascript-наук
|
|
Регистрация: 23.02.2013
Сообщений: 127
|
|
Прошу прощения за невнимательность, голова совсем зависла пока я пытался разобраться, переутомился видимо и вставил тект задачи не так и не туда. Вот, все поправил.
<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.
|
|
16.03.2013, 00:51
|
|
Кандидат Javascript-наук
|
|
Регистрация: 23.02.2013
Сообщений: 127
|
|
Можно ли как-нибудь воочию посмотреть как происходит обработка скриптов? Что обрабатывается после чего, так сказать. У меня складывается впечатление, что в таком раскладе без сильных хитростей не обойтись, и ещё мне стало казаться что функция qwerty() получает не по 1 значению для обработки, а сразу все значения из массива, поэтому никакой интервал в этой функции и не работает |
|
16.03.2013, 01:36
|
 |
Профессор
|
|
Регистрация: 09.11.2009
Сообщений: 1,101
|
|
фонарик,
Зачем вы цикл суете, если вам показали пример на таймауте, и там не было цикла ?
<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>
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
|
|
16.03.2013, 02:00
|
|
Кандидат Javascript-наук
|
|
Регистрация: 23.02.2013
Сообщений: 127
|
|
walik, что-то вот основное не понимается и всё тут, в этом и все беды. Как я только не пробовал уже. А вот таймаут в первом скрипте делать почему-то не допетрил 
Спасибо вам за помощь, я уже 2 дня не мог решить эту задачу )) Можете сказать в вашем примере в 22 строке
pre_qwerty(++u);
что происходит на словах ? Увеличение на единицу переменной там плюсики в конце идут, а тут в начале
|
|
16.03.2013, 02:06
|
|
Профессор
|
|
Регистрация: 09.11.2009
Сообщений: 1,101
|
|
Не знаю как толком объяснить, но:
Если плюсики в конце, то идет в начале присваивание, а потом инкремент.
var i = 0;
alert(i++); // 0
alert(i); // 1
Если плюсики в начале ставить, то получается наоборот, в начале инкремент, потом присваивание:
var i = 0;
alert(++i); // 1
alert(i); // 1
Как то так.
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
|
|
|
|
