Simple HTML button with Javascript

Question

I'm trying to figure out how to call some functions using html & javascript with buttons and I'm running into issues. In the end, I will have three different functions for four different relays. So for instance, I'll have a manual on and off button for relays 1,2,3,4. There will also be a calibrate function, but that will be a single button for each relay. The last is a setup function, but I'll work that out later. With the current code, I get the following errors.

ReferenceError: functionPost is not defined

Here is the code I have. I'm pretty much illiterate when it comes to javascript so excuse my for my ignorance.

<!DOCTYPE html>
<html>
  <head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/particle-api-js/5.2.6/particle.min.js"></script>
  <meta charset="UTF-8">
  </head>
  <body>
  <button type="button" onclick="functionPost('manual', '1,on')">Manual</button>

  <script type="text/javascript">
var deviceID = '35002400094734343xxxxxx';
var token = '3aaacdf9121d404c1a60d5f5f8535xxxxxxx';
var particle = new Particle();

    function functionPost(functionName, functionArgument){
    var fnPr = particle.callFunction({ deviceId, functionName, functionArgument, token});
       fnPr.then(
  function(data) {
    console.log('Function called succesfully:', data);
  }, function(err) {
    console.log('An error occurred:', err);
  });
}
</script>

  </body>
</html>

If you look at your console there is another error before that - `Uncaught SyntaxError: Unexpected token }`, I think you have an extra `}` at the end of the script — Arun P Johny, Apr 04 '16 at 04:11
When you write code, use proper indentation that will save us from this kind of errors — Arun P Johny, Apr 04 '16 at 04:11
I removed the extra '}' , hopefully this topic can be released now. — dustinjb, Apr 04 '16 at 13:57

score 1 · Accepted Answer · edited May 23 '17 at 12:24

1

Try using an event listener: Add an id to your button as below.

HTML:

<button type="button" id="postfunctionbtn" functionname="manual" functionargs="1,on">Manual</button>

JAVASCRIPT:

document.getElementById("postfunctionbtn").addEventListener ("click", functionPost, false);

function functionPost(functionName, functionArgument){
    console.log(this.getAttribute("functionname"));
    console.log(this.getAttribute("functionargs"));
    var fnPr = particle.callFunction({ deviceId, functionName,          functionArgument, token});
       fnPr.then(
  function(data) {
    console.log('Function called succesfully:', data);
  }, function(err) {
    console.log('An error occurred:', err);
  });
}

I have consoled the args for you to undestand how we can pick them in this case. Here is the fiddle: https://jsfiddle.net/swaprks/wu6pnLqj/

For why not to use onlick see this link: Uncaught ReferenceError: function is not defined with onclick

edited May 23 '17 at 12:24

Community

1
1

answered Apr 04 '16 at 04:36

Swaprks

1,553
11
16

*functionname* and *functionargs* should be *data-* attributes, or associated with the element some other way. Attaching non–standard attributes in HTML is not a good idea. – RobG Apr 04 '16 at 04:57
I'm not sure how to reply to this, I kind of figured it out...but have more questions. – dustinjb Apr 04 '16 at 12:20
what is your question @user2240531 – Swaprks Apr 04 '16 at 12:27
I was able to get what you helped me with working, but I need to repeat the manual function (on/off) for four different relays. I did it by repeating the function four times, but I'm convinced there is an easier way. – dustinjb Apr 04 '16 at 13:54
@user2240531 can you create a fiddle? so that i can get to see the code.. – Swaprks Apr 04 '16 at 16:14
This one works - https://jsfiddle.net/DustinJB/f2y0sutw/1/#&togetherjs=kQSLUBLQz1 – dustinjb Apr 04 '16 at 16:45
This one doesn't work https://jsfiddle.net/#&togetherjs=kQSLUBLQz1 – dustinjb Apr 04 '16 at 16:49
@user2240531 i can see the same code in both the links..have you not saved..or are you making changes to it? – Swaprks Apr 04 '16 at 16:54
I had the window open, try again. – dustinjb Apr 04 '16 at 16:59
@user2240531 try using the class name..see this fiddle: https://jsfiddle.net/swaprks/hdjzjbem/ – Swaprks Apr 04 '16 at 17:16
@user2240531 did it work? – Swaprks Apr 04 '16 at 17:26
It turns it on, but not off and only for one relay. The call function to turn relay 1 on, is manual 1,on and to turn it off, manual 1,off and for relay 2 manual 2,on and off manual 2,off. I have four of those in total. Does that make sense? – dustinjb Apr 04 '16 at 17:36
This one works to turn two of the relays on and off. https://jsfiddle.net/DustinJB/f2y0sutw/3/#&togetherjs=kQSLUBLQz1 – dustinjb Apr 04 '16 at 17:43
@dustinjb now with this does it help: https://jsfiddle.net/swaprks/hdjzjbem/4/ – Swaprks Apr 04 '16 at 17:52
YES!!!! How do I find you for more help! haha...I praise you! – dustinjb Apr 04 '16 at 17:59
@dustinjb you can post it here or skype swaprks..please rate my answer if it helped you..and the comments as well..thanks – Swaprks Apr 04 '16 at 18:01

Simple HTML button with Javascript

1 Answers1