如何在 JavaScript 中发布输入字段的值

Question

首先，我尝试将输入值设置为变量：

window.onload = function() {
let inputValue = document.getElementById("myInput").value;
return inputValue;
};

然后我想通过 API 调用发布输入字段的值：

function getPost(inputValue) {
return fetch("https://rel.ink/api/links/", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
url: inputValue
})
}).then(res => res.json());
}
function tinyURL() {
getPost()
.then(data => {
console.log("Success:", data);
})
.catch(error => {
console.error("Error:", error);
});
}
function addEventListener() {
document.getElementById("postBtn").addEventListener("click", tinyURL);
}

但是，该值不会通过，因为console.log输出为：

url： Array(1(

0： "此字段为必填字段">
长度： 1

API 调用成功，但输入值出现问题。我做错了什么？

Answer 1

当你在window.onload上取值时，你总是在传递元素的相同初始值，而你可能不想要的。

您应该在全局范围内声明变量，并在输入事件上更新变量：

改变：

window.onload = function() {
let inputValue = document.getElementById("myInput").value;
return inputValue;
};

自：

let inputValue;
document.getElementById("myInput").addEventListener('input', function()
inputValue = this.value;
});

或者：可以直接设置当前值

body: JSON.stringify({
url: document.getElementById("myInput").value
})