如何在我的網站上顯示來自 API 的數字？

Question

    You are visitor # <span id=VisitorCounter></span>
    <script>

fetch("https://6ka4boms3b.execute-api.us-east-1.amazonaws.com/Visits/visitornumber", {
  method: "GET", 
 // mode: "cors",
  headers: {
    "Content-Type": "application/json",
    //"Access-Control-Allow-Origin" : "*",
    //"Access-Control-Allow-Credentials": true,
  },
})
.then(response => response.json())
.then(data => {console.log(data);})
.catch((error) => {console.log(error);})

    </script>

這就是我到目前為止所擁有的，我的網站只顯示“您是訪客#”，我不確定如何顯示從我的 API 中獲取的號碼。

Answer 1

您可以使用document.getElementById()引用您的訪問者計數器范圍，然后將 API 值傳遞給該范圍的innerHTML 。

 var visitorCounter = document.getElementById("VisitorCounter"); fetch("https://6ka4boms3b.execute-api.us-east-1.amazonaws.com/Visits/visitornumber", { method: "GET", // mode: "cors", headers: { "Content-Type": "application/json", //"Access-Control-Allow-Origin" : "*", //"Access-Control-Allow-Credentials": true, }, }) .then(response => response.json()) .then(data => { visitorCounter.innerHTML = data; }) .catch((error) => { console.log(error); })

 You are visitor # <span id=VisitorCounter></span>

Answer 2

只需在代碼中使用.textContent 即可。

 let getVisitorCounts = document.getElementById("VisitorCounter"); fetch("https://6ka4boms3b.execute-api.us-east-1.amazonaws.com/Visits/visitornumber", { method: "GET", // mode: "cors", headers: { "Content-Type": "application/json", //"Access-Control-Allow-Origin" : "*", //"Access-Control-Allow-Credentials": true, }, }) .then(response => response.json()) .then(data => { /* ADDED */ getVisitorCounts.textContent = data; }) .catch((error) => { console.log(error); })

 You are visitor # <span id="VisitorCounter"></span>