I’ll try and explain why it does/doesn’t work, though I feel you should first decide what route you want to take, and stick to it. SDK/JQuery, either is fine, just please don’t keep using them through one another when asking about them on different posts. Better yet, stick to one posts.
The ‘working’ one…
<button type="button" id="manual-0-ON" functionName='manual', functionArgument='0,on'>ON</button>
In there, you’re adding custom attributes to the HTML, which may, or may not be, something you want to do. In this case, you probably don’t want to do that. Also, the comma after ‘manual’ shouldn’t be there regardless. Not to mention that adding them is utterly useless, since they’re not being used whatsoever, but we’ll get to that…
document.getElementById("manual-0-ON").addEventListener ("click", functionPost, false);
So, when the element with ID “manual-0-ON” is clicked you call the functionPost function. Fair enough. Let’s take a look at that function, shall we?
function functionPost(functionName, functionArgument){
var fnPr = particle.callFunction({ deviceId: '35002400094734343231xxxx' , name: 'manual' , argument: '0,on', auth: '3aaacdf9121d404c1a60d5f5f853585c156axxxx'});
document.getElementById("manual-0-OFF").addEventListener ("click", functionPost, false);
function functionPost(functionName, functionArgument){
var fnPr = particle.callFunction({ deviceId: '35002400094734343231xxxx' , name: 'manual' , argument: '0,off', auth:'3aaacdf9121d404c1a60d5f5f853585c156axxxx'});
document.getElementById("manual-1-ON").addEventListener ("click", functionPost, false);
function functionPost(functionName, functionArgument){
var fnPr = particle.callFunction({ deviceId: '35002400094734343231xxxx' , name: 'manual' , argument: '1,on', auth: '3aaacdf9121d404c1a60d5f5f853585c156axxxx'});
document.getElementById("manual-1-OFF").addEventListener ("click", functionPost, false);
function functionPost(functionName, functionArgument){
var fnPr = particle.callFunction({ deviceId: '35002400094734343231xxxx' , name: 'manual' , argument: '1,off', auth:'3aaacdf9121d404c1a60d5f5f853585c156axxxx'});
}
}
}
}
That right there is the entire functionPost function. For some reason you’re creating another function within that, and a new one within that, and a new one within that. It probably should have been four separate functions, but now we’ve got a single (messed up) one.
Now for the interesting part. The eventlistener from earlier will call the ‘top’ level function, which is the only one it sees. That function expects two arguments functionPost(functionName, functionArgument), and you give it none addEventListener ("click", functionPost, false);.
The following code will then be executed:
var fnPr = particle.callFunction({ deviceId: '50ff6c065067545646580487' , name: 'temp' , argument: '0,on', auth: 'd09a315a122f41d8b2b119d0010317e2948a6198'});
document.getElementById("manual-0-OFF").addEventListener ("click", functionPost, false);
The first line calls the actual functions, though there’s no need to make it a variable, since you’re not using it anyhow.
The second line registers a new event listener to listen to the second button (pump 1 off). Since you’re making it activate the same function as the last one, I’m thinking it’s only working because it uses the function within the same scope. Not sure, but that’s the only thing that seems to make sense. That’s then repeated for the other buttons as well.
Now, when I say ‘working’, that’s only partially true. Due tot he way it’s set up, with the cascading, only the first button will work initially. You need to press them sequentially at least once to have them all work. That’s only logical because the listeners aren’t attached until after you’ve executed the first function. And then the second, and finally the third.
Then back to the function arguments… Taking a look at the first function call only:
function functionPost(functionName, functionArgument){
var fnPr = particle.callFunction({ deviceId: '50ff6c065067545646580487' , name: 'temp' , argument: '0,on', auth: 'd09a315a122f41d8b2b119d0010317e2948a6198'});
document.getElementById("manual-0-OFF").addEventListener ("click", functionPost, false);
//cascaded other functions below...
}
So, you’ve got a function that expects two arguments. As we’ve established before, you’re not giving them any. Not only that, but even if you did give them any, they wouldn’t be used regardless. Nowhere in that function do you use either of the arguments, rather you’ve hard coded the data.
From the example I gave you here:
function functionPost(functionName, functionArgument){
var fnPr = particle.callFunction({ deviceId: ActualDeviceID, name: functionName, argument: functionArgument, auth: token });
}
I called that function, and handed it the two parameters it was expecting, as such:
<button type="button" onclick="functionPost('functionName', 'functionArgument')">function 1</button>
I then actually used those parameters in the function to replace some values. That way, I din’t have to hard code them into the function, which made it reusable. That was the whole point of using those parameters, otherwise, don’t bother adding them, they’re then pointless.
So, that’s the only classified as ‘working’.
The ‘not working’ one:
<button type="button" id="postfunction" functionName='manual', functionArgument='0,on'>ON</button>
<button type="button" id="postfunction" functionName='manual', functionArgument='0,off'>OFF</button>
Same thing as before, useless arguments, don’t bother.
More importantly, you’re giving both the same ID. Not only does it not make sense, it’s also not a good thing to do. They’re identifiers. Hard to identify if there are duplicates. Some more on StackExchange here. Just don’t do that…
var name = "functionName";
var argument = "functionArgument";
Unless you’ve changed those like you did in the button, this won’t be of much help, would it?
document.getElementById("postfunction").addEventListener ("click", functionPost, false);
Okay, duplicate IDs aside assuming they work, if you click either button, the same functionPost will be activated. Makes sense so far, let’s see what that function does…
function functionPost(name, argument){
var fnPr = particle.callFunction({ deviceId, name, argument, auth});
fnPr.then(
function(data) {
console.log('Function called succesfully:', data);
}, function(err) {
console.log('An error occurred:', err);
}
);
}
Well, would you look at that, it expects two arguments, neither of which it’s given.Just to be sure the variables declared earlier weren’t actually used, I had the arguments printed over the console, and it was complete garbage.
Disregarding that for a bit, let’s check the cloud call:
var fnPr = particle.callFunction({ deviceId, name, argument, auth});
This time around it makes sense to make it a variable, since you’ll be using that as a promise.
The function arguments however… are messed up. Let’s check the documentation how it’s supposed to look:
var fnPr = particle.callFunction({ deviceId: 'DEVICE_ID', name: 'brew', argument: 'D0:HIGH', auth: token });
You can’t just delete stuff and expect it to still work. That syntax is there for a reason, and if you don’t stick to it, chances are things won’t work. The way you’ve got it set up, the four arguments are actually variables. As said before, the name and argument are garbage, since they’re function arguments, but aren’t passed through. deviceID and auth do actually use the variables declared before. Then again, it won’t matter, because you didn’t stick to the syntax.
All in all, plenty of reasons why things aren’t working, for either version. And once again a great example of why cross-posting isn’t the way to go, since I’ve posted a working example over here, in response to another question of yours. Had these all been in the same topic, things might not have gotten this confusing.
Regardless, try to see if you understand why the above doesn’t work, got to start somewhere…