How do I trigger javascript from a button click

Question

I'm trying to trigger javascript to start, stop and restart a stopwatch from a button in the html file. What is the best way to pass an event from the html to the javascript?

I have managed to trigger a console log when the button is pressed, but I can't put in the javascript in the second js file. I just receive errors. Would socket.io work? I have investigated Event emitters and listeners but I think it's out of my skill level.

server.js

var express = require('express');
var app = express();
var path = require('path');
var Stopwatch = require("node-stopwatch").Stopwatch;
const EventEmitter = require('events');

var stopwatch = Stopwatch.create();

app.use(express.static('public'));

// start the express web server listening on 8080
app.listen(8080, () => {
  console.log('listening on 8080');
});

// serve the homepage
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

stopwatch.start();

/*
stopwatch output test
*/

console.log("ticks: " + stopwatch.elapsedTicks);
console.log("milliseconds: " + stopwatch.elapsedMilliseconds);
console.log("seconds: " + stopwatch.elapsed.seconds);
console.log("minutes: " + stopwatch.elapsed.minutes);
console.log("hours: " + stopwatch.elapsed.hours);

//stop it now
stopwatch.stop();

class MyEmitter extends EventEmitter {}

const myEmitter = new MyEmitter();
myEmitter.on('event', () => {
  console.log('an event occurred!');
});

client.js

console.log('Client-side code running');


const button = document.getElementById('myButton');
button.addEventListener('click', function(e) {
  console.log('button was clicked');
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Stopwatch</title>
  </head>
  <body>
    <h1>Stopwatch</h1>
    <p id="counter">Loading button click data.</p>
    <button id="myButton">Click me!</button>
  </body>
  <script src="client.js"></script>
</html>

I expected to trigger the javascript on button click but I cannot run it in client.js

Anton Marinenko · Accepted Answer · 2019-03-30 17:23:42Z

1

Use in the client.js

window.addEventListener("load", myFunction);

and place your code to myFunction

answered Mar 30, 2019 at 17:23

Anton Marinenko

3,1401 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

UXWill Over a year ago

This works for console log, but when I add in the Stopwatch.create code, I get the error 'Stopwatch is not defined'. The node-stopwatch module is not being called client side.

Anton Marinenko Over a year ago

If you need time measure for processes in the client side, you should look something else. Node-stopwatch works only with node.js, and you can use it on the server.

Punitha Subramani · Accepted Answer · 2019-03-30 17:25:07Z

1

If this console is printed, console.log('Client-side code running');

Try to add your button event inside a function.

function onLoadBody() {
const button = document.getElementById('myButton');
button.addEventListener('click', function(e) {
  console.log('button was clicked');
});
}

<body onload="onLoadBody()" >...

answered Mar 30, 2019 at 17:25

Punitha Subramani

1,4621 gold badge8 silver badges6 bronze badges

2 Comments

UXWill Over a year ago

Thanks, this worked. What is better though, onLoadBody or Event listener?

Punitha Subramani Over a year ago

In Event Listener there are multiple ways and features. If you use event listener button.addEventListener("click", functionhandler1); button.addEventListener("click", functionhandler2); We can call multiple function in one handler/click. onLoadBody() - Calling direct function in element which is fine but you can call only one function in handler example onload="handler1() handler2()" you cant call

Waqar · Accepted Answer · 2019-03-30 17:26:10Z

0

let say you have two files, client.js and server.js You can use socket.io for quicker response as apposed to HTTP request You just need to emit a key to the server and the server will respond to that emit. Client.js

let socket = io();
socket.emit('start')

Server.js

socket.on('start',(data)=>{
// do what ever you want and send back to client with the same emit method 
// `socket.emit()` sends message to connected client
// socket.broadcast.emit() send message to all clients except you
// io.emit() send message to all including you
})

answered Mar 30, 2019 at 17:26

Waqar

8485 silver badges16 bronze badges

Collectives™ on Stack Overflow

How do I trigger javascript from a button click

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related