Буфер вывода Javascript размещает вещи в неправильном порядке - PullRequest
Новая
       17

Буфер вывода Javascript размещает вещи в неправильном порядке

0 голосов
/ 01 марта 2012

Мой обычный код JavaScript, кажется, выводит материал на страницу либо неправильно, либо в неправильном порядке, что странно, потому что код очень прост (возможно, 20 строк сверху).Мой код ниже.Примечание:

  • pttr_data.length вернет 150
  • clean_array.length вернет 4.
  • output - это объект div, т. Е. Var output = document.getElementById ("results");

Я хочу, чтобы мой код выводился так: 

<div>matcha matchb matchc matchn </div>

Но вместо этого он возвращает: 

<div/>matcha matchb matchc match

Здесьмой код, в котором я поместил случайные символы, чтобы выяснить, куда идут вещи (вы увидите ;;;, |||, [[[, }}} в окружении элементов div): 

var len = pttr_data.length;
for (var i = 0; i < len; i++) {
    var clean_array = pttr_data[i].match(RegExp(rexp.value, flags.value));
    output.innerHTML += ";;;<div>|||";
    var lengthy = clean_array.length;
    for (var j = 1; j < lengthy; j++) {
        if( clean_array[j] ) { output.innerHTML += clean_array[j] + ' '; }
        else { output.innerHTML += 'NULL '; }
    }
    out.innerHTML += "[[[</div>}}}\n";
}

Этот код возвращает: 

;;;<div>|||</div>matcha matchb matchc [[[}}}

Может кто-нибудь объяснить, почему это происходит?Работают ли javascript для циклов независимо друг от друга (и, таким образом, заканчиваются с различной скоростью), даже если они вложенные?Это не имеет никакого смысла, однако, почему кто-то разрабатывает такой язык сценариев?
Как мой код может выводить <div/>blah вместо <div>blah</div>?

Спасибо

1 Ответ

2 голосов
/ 01 марта 2012

Свойство .innerHTML немного сложнее, чем просто строка, к которой вы можете добавить.Если вы добавите "<div>" к нему (или ";;;<div>|||" в вашем примере), браузер не будет ждать, чтобы увидеть, если вы в конечном итоге предоставите закрывающий тег </div>, он просто сразу создаст div.Затем вы добавляете больше текста: "matcha", "matchb", etc.И, наконец, вы добавляете закрывающий </div>, который браузер игнорирует, потому что, опять же, он его не ожидал, но сохраняет "[[[}}}".

вместо добавления к .innerHTML по ходу,добавьте строковую переменную и затем установите .innerHTML равным этой строке в конце.

Если вы хотите добавить все элементы clean_array через пробел, вам даже не нужен цикл for, вы можете просто использовать .join(): 

output.innerHTML = "<div>" + clean_array.join(" ") + "</div>";
// or for all from index 1
output.innerHTML = "<div>" + clean_array.slice(1).join(" ") + "</div>";

Но, чтобы сохранить ваше гнездо для цикла: 

var len = pttr_data.length,
    outputStr = "";  // use a string variable

for (var i = 0; i < len; i++) {
    var clean_array = pttr_data[i].match(RegExp(rexp.value, flags.value));
    outputStr += ";;;<div>|||";
    var lengthy = clean_array.length;
    for (var j = 1; j < lengthy; j++) {
        // I think ternary conditional is neater than if/else
        outputStr += clean_array[j] ? clean_array[j] + ' ' : 'NULL ';
    }
    outputStr += "[[[</div>}}}\n";
}

output.innerHTML += outputStr;
...