我有四个从服务器检索数据的按钮。我有一个问题,当我点击四个按钮之一时,我得到正确的值,但它填充所有四个html跨度。因此,例如,如果我单击button1,则button1的结果将填充所有四个按钮的跨度。如果我点击button2,我会从button2获得结果,但是在所有四个范围内也是如此。
我已经尝试了四种不同版本的代码,但我得到的结果略有不同。
这是HTML:
<html>
<head>
<title>Particle Javascript Example</title>
<script type="text/javascript" src="http://cdn.jsdelivr.net/particle-api-js/5/particle.min.js"></script>
</head>
<body>
<br>
<span id="r1"></span>
<button type="button" onclick="variableGet('getRelay1')">Relay1</button><br>
<span id="r2"></span>
<button type="button" onclick="variableGet('getRelay2')">Relay2</button><br>
<span id="r3"></span>
<button type="button" onclick="variableGet('getRelay3')">Relay3</button><br>
<span id="r4"></span>
<button type="button" onclick="variableGet('getRelay4')">Relay3</button><br>
以下是我尝试的不同版本
此代码始终为我提供第一行的数据:
function variableGet(variableName){
var vrGr = particle.getVariable({ deviceId: ActualDeviceID, name: variableName, auth: token });
vrGr.then(
function(data) {
document.getElementById("r1").innerHTML = data.body.result;
}
);
}
此代码向我提供了我点击所有四行的按钮信息,但同样,它始终是相同的文字。
function variableGet(variableName){
var vrGr = particle.getVariable({ deviceId: ActualDeviceID, name: variableName, auth: token });
vrGr.then(
function(data) {
document.getElementById("r1").innerHTML = data.body.result;
document.getElementById("r2").innerHTML = data.body.result;
document.getElementById("r3").innerHTML = data.body.result;
document.getElementById("r4").innerHTML = data.body.result;
}
);
}
我也试过这个,但是我和第一个版本一样,得到了正确的数据,但只是在第一行:
function variableGet(variableName){
var vrGr = particle.getVariable({ deviceId: ActualDeviceID, name: variableName, auth: token });
vrGr.then(
function(data) {
document.getElementById("r1").innerHTML = data.body.result
},
function(data) {
document.getElementById("r2").innerHTML = data.body.result
},
function(data) {
document.getElementById("r3").innerHTML = data.body.result
},
function(data) {
document.getElementById("r4").innerHTML = data.body.result
}
);
最后,我也试过这个,再次,我得到了正确的数据,但总是在同一条线上:
function variableGet(variableName){
requestURL = "https://api.particle.io/v1/devices/" + ActualDeviceID + "/" + variableGet + "/?access_token=" + token;
var vrGr = particle.getVariable({ deviceId: ActualDeviceID, name: variableName, auth: token });
vrGr.then(
function(requestURL) {
document.getElementById("r1").innerHTML = requestURL.body.result
},
function(requestURL) {
document.getElementById("r2").innerHTML = requestURL.body.result
},
function(requestURL) {
document.getElementById("r3").innerHTML = requestURL.body.result
},
function(requestURL) {
document.getElementById("r4").innerHTML = requestURL.body.result
}
);
}
答案 0 :(得分:2)
正如skobaljic建议您可以在onclick中添加第二个参数,如下所示:
<html>
<head>
<title>Particle Javascript Example</title>
<script type="text/javascript" src="http://cdn.jsdelivr.net/particle-api-js/5/particle.min.js"></script>
</head>
<body>
<br>
<span id="r1"></span>
<button type="button" onclick="variableGet('getRelay1', 'r1')">Relay1</button><br>
<span id="r2"></span>
<button type="button" onclick="variableGet('getRelay2', 'r2')">Relay2</button><br>
<span id="r3"></span>
<button type="button" onclick="variableGet('getRelay3', 'r3')">Relay3</button><br>
<span id="r4"></span>
<button type="button" onclick="variableGet('getRelay4', 'r4')">Relay3</button><br>
然后您的功能可能如下所示:
function variableGet(variableName, r){
var vrGr = particle.getVariable({ deviceId: ActualDeviceID, name: variableName, auth: token });
vrGr.then(
function(data) {
document.getElementById(r).innerHTML = data.body.result;
}
);
}
请告诉我们这是否适合您。
答案 1 :(得分:1)
您还可以创建正确的范围ID,因为您已经在variableName中包含了数字。
非常快速的解决方法:
function variableGet(variableName){
var vrGr = particle.getVariable({ deviceId: ActualDeviceID, name: variableName, auth: token });
var spanId = "r" + variableName.slice(-1);
vrGr.then(
function(data) {
document.getElementById(spanId).innerHTML = data.body.result;
}
);
}