Question

想法是更新API密钥中的ID。我可以更新变量，但DOM不会显示更改。 IMO是船只ID所在的位置，它将显示相关数据。

我已经尝试过使用AddEventListener，但是由于我是javascript新手，所以我不知道要搜索什么或做什么。希望外面有人可以将我推向正确的方向。

document.addEventListener("DOMContentLoaded", loadScript);

let vesselCall;
let imo;

let url =
  "https://services.marinetraffic.com/api/vesselmasterdata/v:3/API_KEY/imo:" +
  imo +
  "/protocol:jsono";

function changeVessel() {
  let input = document.querySelector("#changeImo").value;
  imo = input;
}

async function loadScript() {
  let vesselApi = await fetch(url);
  vesselCall = await vesselApi.json();
  console.log(vesselCall);

  let vesselTemplate = document.querySelector("#vessel").content;
  let vessel = vesselTemplate.cloneNode(true);

  vessel.querySelector(".name").textContent = vesselCall["DATA"][0]["NAME"];
  vessel.querySelector(".mmsi").textContent = vesselCall["DATA"][0]["MMSI"];
  vessel.querySelector(".imo").textContent = vesselCall["DATA"][0]["IMO"];
  vessel.querySelector(".type").textContent =
    vesselCall["DATA"][0]["VESSEL_TYPE"];
  vessel.querySelector(".built").textContent = vesselCall["DATA"][0]["BUILD"];

  document.querySelector(".vessel").appendChild(vessel);
}

HTML只是一个模板和一种具有onclick的窗体，可以更改vessel（）。

谢谢。

Answer 1

如果问题是在IMO更改后重新获取API响应，则应仅从#loadScript中调用#changeVessel。随着IMO更改时URL的更改，我的建议是在#changeVessel中构建URL并将其作为参数传递给#loadScript。

function changeVessel () {
    const updatedIMO = document.querySelector("#changeImo").value;
    const url = "https://services.marinetraffic.com/api/vesselmasterdata/v:3/API_KEY/imo:"
        + updatedIMO
        + "/protocol:jsono";
    loadScript(url);
}

async function loadScript (url) {
     // ....

更新变量后更新DOM

1 个答案: