Question

我希望有人可以帮我弄清楚我做错了什么...... Eloquent JS书中的这个练习要求你写一些可以向用户提出单词/值的代码因为他们打字...我写的代码如下。会发生的是，当我运行代码时，div元素的文本内容会更改为错误的值。具体来说，它设置为数组中所有元素的字符串＆＃39; terms＆＃39;。我真的无法弄清楚为什么会这样！

    <input type="text" id="field">
<div id="suggestions" style="cursor: pointer"></div>

<script>
  // Builds up an array with global variable names, like
  // 'alert', 'document', and 'scrollTo'
  var terms = [];
  for (var name in window)
    terms.push(name);
  var input = document.querySelector('input');
  var div = document.querySelector('#suggestions');

input.addEventListener("input", function(event){
  var last = input.value.lastIndexOf(" ")+1;
  var check = input.value.slice(last);
  var reg = new RegExp(check);
  for (var i=0; i<terms.length; i++) {
    if (reg.test(terms[i])) {
      var text = document.createTextNode(terms[i]);
      div.appendChild(text)};
  };
})

</script>

Answer 1

我猜你忘记在输入中的每次更改之前清理div。我还在每个单词后面添加了一个空格，以使输出更具可读性。

// Builds up an array with global variable names, like
// 'alert', 'document', and 'scrollTo'
var terms = [];
for (var name in window)
    terms.push(name);
var input = document.querySelector('input');
var div = document.querySelector('#suggestions');

input.addEventListener("input", function(event){
  div.innerHTML = '';
  var last = input.value.lastIndexOf(" ")+1;
  var check = input.value.slice(last);
  var reg = new RegExp(check);
  for (var i=0; i<terms.length; i++) {
    if (reg.test(terms[i])) {
      var text = document.createTextNode(terms[i] + ' ');
      div.appendChild(text)};
  };
})

<input type="text" id="field">
<div id="suggestions" style="cursor: pointer"></div>

使用此代码，您将显示包含输入中最后一个单词的窗口对象的属性名称。尝试写“窗口位置文档”。这是你在找什么？

雄辩的JS练习（第18章Q.2）

1 个答案: