關于獲取和顯示顯示的幫助：無回傳我的頁面-有解無憂

這是我的代碼：

const clcBtn = document.getElementById("calcButton");
let clcInput = document.getElementById("calcInput");
const result = document.getElementById('paragraph');
const loader = document.getElementById('spinner');
clcBtn.addEventListener("click", calcFunc);
function calcFunc() {
  loader.classList.add("display")
  fetch(`http://localhost:5050/fibonacci/`).then(function (response) {
    return response.json().then(function (data) {
      result.innerHTML = data.clcInput.value; // i want to get the input value from the input field and the server to calculate it and present it to the user.
    });
  });
}

基本上我想做的是將用戶輸入的值添加到innerHTML段落ID名稱中。然后我想讓按鈕對點擊做出反應并重新顯示“加載器”（我在CSS檔案中給它顯示：無）然后，我需要讓按鈕在輸入時顯示錯誤訊息高于 50。

我試圖做的事情：

在 - 的里面

clcBtn.addEventListener("點擊", calcFunc); 函式 calcFunc() {

我試圖補充：

loader.classlist.add("display")

和里面

return response.json().then(function (data) { result.innerHTML = data.clcInput.value;

我試圖添加并將其更改為：

clcInput.value = innerHTML.result;

我究竟做錯了什么？我的語法有什么問題，我寫所有東西的順序是什么？謝謝你！！！

uj5u.com熱心網友回復：

如果我正確理解你需要什么，你應該看看我在下面做的小片段。它在 API 呼叫期間顯示一個加載器，并在您獲得結果時隱藏它，并根據您鍵入的值更新資訊段落。

為了使代碼正常作業，我建議您更改的主要內容不是向微調器元素添加或洗掉類以隱藏和顯示它，而只需使用直接更改其樣式loader.style.display = "value"

希望能幫助到你。

const clcBtn = document.getElementById("calcButton");
let clcInput = document.getElementById("calcInput");
const result = document.getElementById('paragraph');
const loader = document.getElementById('spinner');
clcBtn.addEventListener("click", calcFunc);

function calcFunc() {
  paragraph.innerText= "";
  loader.style.display = "block";
  
  // TimeOut to simulate API Call
  setTimeout(function() {
    loader.style.display = "none";
    if (clcInput.value > 50) {
      paragraph.innerText = clcInput.value   " - Error, value too high";
    } else {
      paragraph.innerText = clcInput.value   " - Value correct";
    }
  }, 2000);
}

#spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
  border: 5px solid black;
  display: none;
}

<input type="number" id="calcInput" />
<button id="calcButton">calcButton</button>
<div id="spinner"></div>
<p id="paragraph"></p>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/532213.html

標籤：javascript按钮输入获取 API

上一篇：單擊按鈕時如何使用表外的輸入更改td的值

下一篇：Tkinter將按鈕作為引數傳遞