Question

我正在开发维基百科查看器（https://codepen.io/rwiens/pen/YLMwBa），这几乎已经完成，但我有两个问题：

按Enter键时无法提交搜索结果。我添加了一个事件监听器，可以使用console.log＆＃34; hello：但我无法调用searchWiki函数。
当我进行新搜索时，结果将附加到我原来的结果的底部。

我在网上搜索了过去的半天并且卡住了。任何帮助将不胜感激。

 <div class="container">
    <div class="banner text-center align-items">
        <h1>Wiki Search</h1>
        <p>Search for articles on Wikipedia</p>
    </div>
    <form action="" class="text-center">
        <input type="search" id="search-box" placeholder="Search Here">
        <div class="buttons">
            <input type="button" onclick="searchWiki()" id="search- 
             button" value="Search">
            <input type="submit" value="Feel Lucky?">
        </div>
    </form>
    <div class="articles">
        <ul id="results">


        </ul>
    </div>
 </div>


 <script type="test/javascript">

    const searchBox = document.getElementById('search-box');
    const sButton = document.getElementById('search-button');
    const results = document.getElementById('results');


    window.onload = function() {
    searchBox.focus();
    };

    const searchWiki = () => {
        const keyword = searchBox.value;
     fetch("https://en.wikipedia.org/w/api.php? 
     &origin=*&action=opensearch&search=" + keyword + "&limit=5", {
     method: "POST",
     headers: {
       "Content-Type": "application/json"
     },
     body: JSON.stringify({ query: event.currentTarget.value })
    })
      .then(response => response.json())
      .then((data) => {
        console.log(data);
        build(data); 
     });
    }


    const build = (data) => {
      let title = data[1];
      let description = data[2];
      let url = data[3];
    for(let x = 0; x < 5; x++){
        console.log(title);
        const item = `<a href="${url[x]}" target="#">
                    <li>
                    <h5>${title[x]}</h5>
                    <p>${description[x]}.</p>
                </li>
                </a>`;
        results.insertAdjacentHTML("beforeend", item);
     }

     }

     searchBox.addEventListener("keyup", function(event) {
     if (event.key === "Enter") {
        searchWiki;
    }
    });
    </script>

Answer 1

您没有将searchWiki称为函数。称之为searchWiki();

您还需要删除表单标记。由于其中包含按钮类型元素，因此默认情况下会在输入按下时提交您的表单。

在添加像这样的新数据之前，还要清除结果div

results.innerHTML = ""


for(let x = 0; x < 5; x++){
        console.log(title);
        const item = `<a href="${url[x]}" target="#">
                    <li>
                    <h5>${title[x]}</h5>
                    <p>${description[x]}.</p>
                </li>
                </a>`;

        results.insertAdjacentHTML("beforeend", item);
    }

检查更新的codepen

Answer 2

当我放入searchWiki时，遗憾的是我还没有调用搜索。另外，当我添加results.innerHTML =“”我的搜索只返回一个结果。

Answer 3

您需要为表单提交添加事件侦听器。在那里你需要取消事件（event.preventDefault（））。
清空你的结果@NanditaAroraSharma指出（最好在调用构建函数之前）

Answer 4

解决了它。删除表单，因为它试图将我发送到另一页。

<div class="text-center">
        <input type="search" id="search-box" placeholder="Search Here">
        <div class="buttons">
            <input type="button" onclick="searchWiki()" id="search- 
button" value="Search">
            <input type="button" 
onclick="location.href='https://en.wikipedia.org/wiki/Special:Random';" 
value="Feel Lucky?">
        </div>

用于构建html我从for循环中获取了部分内容。

const build = (data) => {
    let title = data[1];
    let description = data[2];
    let url = data[3];
    results.innerHTML = "";
for(let x = 0; x < 5; x++){
    console.log(title);

    const item = `<a href="${url[x]}" target="#">
                <li>
                <h5>${title[x]}</h5>
                <p>${description[x]}.</p>
            </li>
            </a>`;

            results.innerHTML += item;
 }

}

添加事件监听器后javascript问题调用函数

4 个答案: