Question

下面是html / javascript代码，但是当调用函数calc（）时，它的输出为<ol> 首先标记，但是bot按顺序运行脚本。我已移除settimeout()函数以使其同步运行。

有人可以解释一下将不胜感激。

＆＃13;

function $(id) {
  return document.getElementById(id);
}
regex_field = $('regx');
content = $('content');
output = $('output');
flag_field = $('flag')


flag_field.addEventListener('input', function() {
  calc();
});
content.addEventListener('input', function() {
  calc();
});
regex_field.addEventListener('input', function() {
  calc();
});

function calc() {
  //setTimeout(function () {
  var re = new RegExp(regex_field.value, flag_field.value)
  console.log(re);
  found = content.value.match(re);
  if (found) {
    $('output').innerHTML = "<ol>";
    for (let i = 0; i < found.length; i++) {
      $('output').innerHTML += '<li>' + found[i] + '</li>';
    }
    $('output').innerHTML += "</ol>";
  } else {
    $('output').innerHTML = "Nothing Found!";
  }
  // }, 500);

}

＆＃13;

<html>

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>

<body>


  <div class="row">
    <div class="col-sm-6 form-inline">
      RegExp
      <input class="col-sm-4 form-control form-control-sm" type="text" id="regx" placeholder="Regex Input"> Flag
      <input class="col-sm-1 form-control form-control-sm" type="text" id="flag">
      <br>
      <div>
        <p>Input Content</p>
        <textarea class="form-control col-sm-12" name="input" placeholder="Text" id="content" cols="30" rows="10"></textarea>
      </div>
    </div>
    <div class="col-sm-6">
      <p>Content get</p>
      <div id="output"></div>
    </div>
  </div>


</body>

</html>

＆＃13;

输出如下。我不明白为什么＆＃39; ol＆＃39; tage超越了＆＃39; li＆＃39;标签。

<div id="output">
  <ol></ol> //  <---  question here
  <li>12</li>
  <li>34</li>
</div>

Answer 1

执行$('output').innerHTML = "<ol>";后，会立即将ol标记添加到#output。由于没有结束<ol>的{{1}}无效，因此DOM会自动关闭它。所以你得到：

</ol>

然后，您执行了<div id="output"> <ol></ol> </div>，因此它会将该行添加到$('output').innerHTML += '<li>' + found[i] + '</li>';（这也是无效的，因为#output不能属于li ，但它不知道如何解决它）：

div

你想要做什么建立innerHTML，然后立即设置它，所以更像是：

<div id="output">
    <ol></ol>
    <li>12</li>
</div>

为什么javascript不能逐行运行

1 个答案: