I'm trying to make a html button send certain string to my localhost socket server.(or even console.logging) and then another when i release it. the sending itself seems to be going fine but the mousedown event only happens when i release the button.
Ask away if you want, since i know it seems like a pretty trivial thing, but i just can't seem to get it to work. onclick also only works when mouse is released. And the only thing i can find that's vaguely related when i look it up is w****ing3schools, where the example works, but if i implement it as test in my code it doesnt.
Here is the html with js code, don't worry about asking for more source codes ^^
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initialscale=1, minimum-scale=1">
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
<title>Project pong game</title>
<!-- SCRIPTS -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="js/script.js" type="text/javascript"></script>
<script>
var socket = io();
function doorClicked(){
socket.emit('door', function(data){
socket.send("Door");
});
}
function blueUpPressed() {
socket.emit('blueMov', function(data){
socket.send("1:0");
});
}
function redUpPressed() {
socket.emit('redMov', function(data){
socket.send("1:0");
});
}
function blueDownPressed() {
socket.emit('blueMov', function(data){
socket.send("0:1");
});
}
function redDownPressed() {
socket.emit('redMov', function(data){
socket.send("0:1");
});
}
function blueUpReleased() {
socket.emit('blueMov', function(data){
socket.send("0:0");
});
}
function redUpReleased() {
socket.emit('redMov', function(data){
socket.send("0:0");
});
}
function blueDownReleased() {
socket.emit('blueMov', function(data){
socket.send("0:0");
});
}
function redDownReleased() {
socket.emit('redMov', function(data){
socket.send("0:0");
});
}
</script>
</head>
<body>
<!-- BEGINSCHERM -->
<img src="img/red&blueglitch.gif" id="e-pong-logo" alt="logo e-pong"/>
<button id="startBtn">Start</button>
<div id="opacityLayer" class="team"></div>
<!-- Tutorial RED -->
<section id="tutorialRed1" class="team">
<button id="nextRed2" class="nextBtnStyle red"></button>
</section>
<section id="tutorialRed2" class="team">
<button id="nextRed3" class="nextBtnStyle red"></button>
</section>
<section id="tutorialRed3" class="team">
<button id="nextRedStart" class="nextBtnStyle red"></button>
</section>
<!-- Tutorial BLUE -->
<section id="tutorialBlue1" class="team">
<button id="nextBlue2" class="nextBtnStyle blue"></button>
</section>
<section id="tutorialBlue2" class="team">
<button id="nextBlue3" class="nextBtnStyle blue"></button>
</section>
<section id="tutorialBlue3" class="team">
<button id="nextBlueStart" class="nextBtnStyle blue"></button>
</section>
<!-- BLUE TEAM -->
<section id="blueteam" class="team">
<img class="glitchEffect" src="img/blueteamglitch.gif"/>
<section id="booster">locked</section>
<button id="blueUp" class="buttonStyle" onmousedown="blueUpPressed()" onmouseup = "blueUpReleased()"></button>
<button id="blueDown" class="buttonStyle" onmousedown="blueDownPressed()" onmouseup = "blueDownReleased()"></button>
<img id="startBlueTutorial" class="infoBtn" src="img/infoBtn.png"/>
</section>
<!-- RED TEAM -->
<section id="redteam" class="team">
<img class="glitchEffect" src="img/redteamglitch.gif"/>
<section id="booster">locked</section>
<button id="redUp" class="buttonStyle" onmousedown="redUpPressed()" onmouseup = "redUpReleased()"></button>
<button id="redDown" class="buttonStyle" onmousedown="redDownPressed()" onmouseup = "redDownReleased()"></button>
<img id="startRedTutorial" class="infoBtn" src="img/infoBtn.png"/>
</section>
<!-- Tutorial 1/2 INFO -->
<section id="tutorialRedInfo" class="team"></section>
<!-- Tutorial 2/2 INFO -->
<section id="tutorialBlueInfo" class="team"></section>
</body>