Javascript-форум - innerHTML не работает правильно

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - innerHTML не работает правильно (https://javascript.ru/forum/misc/36435-innerhtml-ne-rabotaet-pravilno.html)

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>

Цитата:

Сообщение от рони (Сообщение 240832)

фонарик,
цирк!!!

А где же кино ?:D

Спасибо за подсказку :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

Как то так.