时间戳

首页 > 解决方案 > 如何修复显示 Uncaught SyntaxError: Unexpected end of input 错误的 javascript

javascript - 如何修复显示 Uncaught SyntaxError: Unexpected end of input 错误的 javascript

问题描述

控制台抛出 Uncaught SyntaxError: Unexpected end of input 错误。这段代码取自我问的另一个问题。起初它有效，但后来我添加了一些标题。然后我删除了标题，现在代码抛出了这个错误。我也将网站部署到这里。我是 API 和 CORS 错误的初学者

var currentQuery = "";

var inputElement = document.getElementsByClassName("anime-input")[0];
inputElement.addEventListener("input", refreshData);
inputElement.dispatchEvent(new Event("input"))

function refreshData(e) {
  //Deal with fetching delay
  currentQuery = inputElement.value;
  var thisQuery = inputElement.value;
  //Hide table, show loading
  document.getElementsByClassName("show-hide")[0].style.display = "block"
  document.getElementsByClassName("show-hide")[1].style.display = "none"

  var query = (e.target.value == "") ? query = e.target.placeholder : e.target.value;
  fetch("https://nyaaapi.herokuapp.com/nyaa/anime?query=" + query)
    .then(res => res.json())
    .then(data => {
      //Deal with fetching delay
      if (thisQuery != currentQuery) {
        return;
      }
      //Initialize column data variables
      var titles = [],
        sizes = [],
        torrents = [],
        dataSize = data.data.length;

      //Arrange the data to appropriate array
      data.data.forEach(dataPoint => {
        titles.push(dataPoint.title);
        sizes.push(dataPoint.size);
        torrents.push(dataPoint.torrent)
      });

      //Clear table
      document.getElementsByClassName("anime-data")[0].innerHTML = ""

      //Put the data in the table
      [Array(dataSize)].forEach((el, index) => {
        row = document.createElement("tr")
        var title = document.createElement("td")
        title.innerText = titles[index]
        row.appendChild(title)
        var size = document.createElement("td")
        size.innerText = sizes[index]
        row.appendChild(size)
        var downloadLink = document.createElement("td")
        downloadLink.innerText = torrents[index]
        row.appendChild(downloadLink)

        document.getElementsByClassName("anime-data")[0].appendChild(row)
      })

      //Hide loading, show table
      document.getElementsByClassName("show-hide")[0].style.display = "none"
      document.getElementsByClassName("show-hide")[1].style.display = "block"
    });
html,
body {
  margin: 0;
  padding: 4px;
  width: 100%;
  height: 100%;
}

table {
  width: 100%;
  border: 1px solid black;
  text-align: center;
}

th,
td {
  border: 1px black solid;
}
<html>

<body>
  Enter Name of Anime:
  <input class="anime-input" type="text" placeholder="Hanasaku Owari">
  <br><br>
  <span class="show-hide">Loading...</span>
  <table class="show-hide">
    <colgroup>
      <col style="width:45%;border: 1px black solid">
      <col style="width:10%;border: 1px black solid">
      <col style="width:45%;border: 1px black solid">
    </colgroup>
    <tr>
      <th style="">Title</th>
      <th style="">Size</th>
      <th style="">Torrent Download</th>
    </tr>
    <tbody class="anime-data">
      <tr>
        <td class="anime-title"></td>
        <td class="anime-download-size"></td>
        <td class="anime-download-link"></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

标签： javascripthtmlapi

解决方案

你没有关闭你的功能

function refreshData(e) {
  //Deal with fetching delay
  currentQuery = inputElement.value;
  var thisQuery = inputElement.value;
  //Hide table, show loading
  document.getElementsByClassName("show-hide")[0].style.display = "block";
  document.getElementsByClassName("show-hide")[1].style.display = "none";

  var query = (e.target.value == "") ? query = e.target.placeholder : e.target.value;
  fetch("https://nyaaapi.herokuapp.com/nyaa/anime?query=" + query)
    .then(res => res.json())
    .then(data => {
      //Deal with fetching delay
      if (thisQuery != currentQuery) {
        return;
      }
      //Initialize column data variables
      var titles = [],
        sizes = [],
        torrents = [],
        dataSize = data.data.length;

      //Arrange the data to appropriate array
      data.data.forEach(dataPoint => {
        titles.push(dataPoint.title);
        sizes.push(dataPoint.size);
        torrents.push(dataPoint.torrent)
      });

      //Clear table
      document.getElementsByClassName("anime-data")[0].innerHTML = "";

      //Put the data in the table
      [Array(dataSize)].forEach((el, index) => {
        row = document.createElement("tr");
        var title = document.createElement("td");
        title.innerText = titles[index];
        row.appendChild(title);
        var size = document.createElement("td");
        size.innerText = sizes[index];
        row.appendChild(size);
        var downloadLink = document.createElement("td");
        downloadLink.innerText = torrents[index];
        row.appendChild(downloadLink);

        document.getElementsByClassName("anime-data")[0].appendChild(row);
      })

      //Hide loading, show table
      document.getElementsByClassName("show-hide")[0].style.display = "none";
      document.getElementsByClassName("show-hide")[1].style.display = "block";
    })
}

替换此代码可能对您有用

推荐阅读