加载 index.html 时出现此错误 - 404 [object%20HTMLElement]

问题描述 投票：0回答：1

没有函数被调用。我有 4 个，只创建了它们，但我还没有调用它们。我知道它们是有效的，因为我在制作它们时正在测试它们。我开始添加一个事件侦听器，但我无法再加载该页面。我没有添加事件侦听器。就在那一步，直到这个错误。这是全球唯一的东西：

var searchbox = document.getElementById('search-box');

var searchButton = document.getElementById('search-button');

var historyBody = document.getElementById('history-body');

var location = document.getElementById('location');

文件结构：

root:

-asstets/

   -css/

      style.css

   -js/

     script.js

-index.html

这是我的 html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="/assets/css/style.css" />
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
    <title>The Next 5 Days | Weather App</title>
  </head>
  <body>
    <header>
      <div class="innder-head">
        <h1 id="page-title" class="page-title">The Next 5 Days</h1>
      </div>
    </header>
    <div class="main-body">
      <section class="search-section">
        <h2 class="search-title">Search for a City:</h2>
        <div class="input-container">
          <i id="location" class="fa-solid fa-location-crosshairs location"></i>
          <input
            type="text"
            id="search-box"
            class="search-box"
            placeholder="San Jose" />
        </div>
        <button id="search-button" class="search-button">Search</button>

        <div class="section-break"></div>
        <div id="history-body" class="history-body"></div>
      </section>
      <section class="dashboard">
        <div class="dash-box">
          <h2 id="dash-city" class="dash-city">San Jose</h2>
          <h3 id="date" class="date">
            April 15, 2023 <i class="dashcard-icon fa fa-sun"></i>
          </h3>
          <p id="temp">40.89 F<span>&#176;</span></p>
          <p id="wind">15 MPH</p>
          <p id="humidity">10 %</p>
        </div>
        <div id="dashcard-body" class="dashcard-body">
          <div class="dashcard-title-body">
            <h2 id="dashcard-body-title" class="dashcard-body-title">
              5-Day Forecast:
            </h2>
          </div>
          <div class="dashcard-box">
            <div id="1" class="dashcard">
              <h2 class="dashcard-tile">4/15/2023</h2>
              <i class="dashcard-icon"></i>
              <p class="dashcard-temp">Temp: 40.89 F<span>&#176;</span></p>
              <p class="dashcard-wind">Wind: 15 MPH</p>
              <p class="dashcard-humidity">Humidity: 10 %</p>
            </div>
            <div id="2" class="dashcard">
              <h2 class="dashcard-tile">4/15/2023</h2>
              <i class="dashcard-icon"></i>
              <p class="dashcard-temp">Temp: 40.89 F<span>&#176;</span></p>
              <p class="dashcard-wind">Wind: 15 MPH</p>
              <p class="dashcard-humidity">Humidity: 10 %</p>
            </div>
            <div id="3" class="dashcard">
              <h2 class="dashcard-tile">4/15/2023</h2>
              <i class="dashcard-icon"></i>
              <p class="dashcard-temp">Temp: 40.89 F<span>&#176;</span></p>
              <p class="dashcard-wind">Wind: 15 MPH</p>
              <p class="dashcard-humidity">Humidity: 10 %</p>
            </div>
            <div id="4" class="dashcard">
              <h2 class="dashcard-tile">4/15/2023</h2>
              <i class="dashcard-icon"></i>
              <p class="dashcard-temp">Temp: 40.89 F<span>&#176;</span></p>
              <p class="dashcard-wind">Wind: 15 MPH</p>
              <p class="dashcard-humidity">Humidity: 10 %</p>
            </div>
            <div id="5" class="dashcard">
              <h2 class="dashcard-tile">4/15/2023</h2>
              <i class="dashcard-icon"></i>
              <p class="dashcard-temp">Temp: 40.89 F<span>&#176;</span></p>
              <p class="dashcard-wind">Wind: 15 MPH</p>
              <p class="dashcard-humidity">Humidity: 10 %</p>
            </div>
          </div>
        </div>
      </section>
    </div>

    <script src="/assets/js/script.js"></script>
  </body>
</html>

图片或错误：

我已经尝试删除节点以查看它是否是 fontawesome，通过使用浏览器（chrome 和 firefox）手动打开来运行。撤消，直到我不能了。谷歌搜索错误并禁用我的 script.js 中的所有函数调用

javascript html fetch font-awesome 404-page
1个回答
0
投票

所以@rozsazoltan 只对了我所需要的一半

我原来有：

var location = document.getElementById('location');

问题是“location”这个词来自“Location”类，这就是它一直因错误而被抛弃的原因

我改成：

var locate = document.getElementById('location');

现在一切正常！谢谢大家的帮助

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.