dustinjb dustinjb - 6 months ago 14
HTML Question

JavaScript getElemendById().innerHTML=data.body.result repeating itself...how to fix?

I have four buttons that retrieve data from a server. I'm having an issue where when I click one of the four buttons, I get the correct values, but it fills all four html spans. So for instance, if I click button1, the results from button1 fill in the spans for all four buttons. If I click button2, I get the results from button2, but in all four spans as well.

I've tried four different versions of code, and I get slightly different results with all four.

Here is the 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>


And here are the different versions I've tried

This code always gives me the data on the first line:

function variableGet(variableName){
var vrGr = particle.getVariable({ deviceId: ActualDeviceID, name: variableName, auth: token });

vrGr.then(
function(data) {
document.getElementById("r1").innerHTML = data.body.result;
}
);
}


This code gives me the info of the button I click on all four lines, but again, its always the same text.

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


I tried this as well, but I get the same as I got in the first version, I get the proper data, but only ever on the first line:

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


And lastly, I tried this as well, again, I get the proper data, but always on the same line:

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

Answer

As skobaljic suggested you can add a second parameter to the onclick like so:

<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>

And then your function could look like:

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

Let us know if that works for you.