JavaScript getElemendById()。innerHTML = data.body.result重复自己...如何修复?

时间:2016-04-07 23:07:05

标签: javascript html

我有四个从服务器检索数据的按钮。我有一个问题,当我点击四个按钮之一时,我得到正确的值,但它填充所有四个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
      }
      );
  }

2 个答案:

答案 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;
      }
    );
}