If 和 Else 语句不适用于 API?



我有这个代码,它显示比特币价格和基数以及其他东西,但我想让它在数据到达之前(我将间隔设置为3秒(显示"正在等待数据到达"在它到达之后,它说";数据已到达"(附言:我正在使用Axios库(这是我的HTML和JSHTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Test</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<h1 id="num"></h1>
<h1 id="num1"></h1>
<h1 id="num2"></h1>
<h1 id="num3"></h1>
<h1 id="num4"></h1>
<h1 id="num5"></h1>
<script src="zoom.js"></script>
</body>
</html>

和JS

const num1 = document.getElementById("num1");
const num2 = document.getElementById("num2");
const num3 = document.getElementById("num3");
const num4 = document.getElementById("num4");
const num5 = document.getElementById("num5");
const num = document.getElementById("num");
if(num1,num2,num3,num4,num5.innerText.length > 0) {
num.innerText = `Data Arrived!`
} else {
num.innerText = `Waiting for Data to Arrive...`
}
setInterval(() => {
const bitcoin = axios.get('https://api.cryptonator.com/api/ticker/btc-usd')
.then(res => {
num1.innerText = `${"Current Base"}, ${res.data.ticker.base}` 
num2.innerText = `${"Current Currency"}, ${res.data.ticker.target}`
num3.innerText = `${"Current Bitcoin Price"}, ${res.data.ticker.price}` 
num4.innerText = `${"Current Volume"}, ${res.data.ticker.volume}` 
num5.innerText = `${"Current Change"}, ${res.data.ticker.change}`
}) 
.catch(err => {
num1.innerHTML = `<strong>ERROR: Nothing found!<strong>`
num2.style.opacity = 0;
num3.style.opacity = 0;
num4.style.opacity = 0;
num5.style.opacity = 0;
})
}, 5000);

这就是我尝试的方法,或者我的If and Else语句的语法有问题吗?

if(num1,num2,num3,num4,num5.innerText.length > 0) {
num.innerText = `Data Arrived!`
} else {
num.innerText = `Waiting for Data to Arrive...`
}

您有两个主要问题。

逗号运算符不会按你想的那样做

逗号运算符返回它右边的任何内容。if (a,b)if (b)的含义相同。

如果要对num1.innerText.length > 0num2进行相同的测试,以此类推,则必须测试它们的所有长度,并使用&&运算符而不是,运算符。

尽管你可以做一个快捷方式,写一个函数来测试数组中的每一件事,然后测试它们是否都正常

if (![num1, num2, num3, num4, num5].some(
element => element.innerText.length === 0
)) {

if语句不具有追溯效力

你在程序开始时测试你的状况。

然后您开始运行间隔

稍后间隔会更改值,因此if语句将通过

…但是您不会再次运行if语句。

您对元素所做的更改不会回到执行if测试时。

您需要在更改元素后进行该测试。

然而这毫无意义。您可以同时设置所有值,并且您知道何时设置这些值。

您可以将Waiting for Data to Arrive…硬编码到HTML中,然后在替换其他元素的innerText的同时用Data Arrived替换它。

最新更新