Using template node i created a html page
there are image that switch when i click them
at a click it sends a payload.
What i want to do now is when i click it first time i want to send x if i click it again i want to send y and so on
How can i do this? Send data from the function? but how then?
Or is there another way to send this information?
What i created is this
Thanks
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Bomb</title>
<style>
img:visited,
img:active,
img:focus {
outline:none;
}
.image {
text-align: center;
border-style:0;
border: 0;
border: none !important;
background: transparent !important
outline: none;
}
.sevenseg {
color: rgba(255, 0, 0, 0.8);
font-size: 85px;
font-family: "Seven Segment";
text-align: center;
margin-top:10px;
}
</style>
</head>
<body>
<table width="95%" border="0" class="image">
<tbody>
<tr>
<td><img src="/image.png" width="65" height="65" alt="" ng-click="send({button: 1 })" id="imageOne" onclick="changeImage('imageOne')" /></td>
<td><img src="/image.png" width="65" height="65" alt="" ng-click="send({button: 2 })" id="imageTwo" onclick="changeImage('imageTwo')" /></td>
</tr>
<tr>
<td><img src="/image.png" width="65" height="65" alt="" ng-click="send({button: 3 })" id="imageThree" onclick="changeImage('imageThree')" /></td>
<td><img src="/image.png" width="65" height="65" alt="" ng-click="send({button: 4 })" id="imageFour" onclick="changeImage('imageFour')" /></td>
</tr>
</tbody>
</table>
<span class="sevenseg"> {{msg.payload}} </span>
<script language="javascript">
function changeImage(x) {
var photo;
var image = document.getElementById(x);
if (image.src.match("Neg.png")) {
photo = image.src.replace( "Neg.png", ".png");
image.src = photo;
}
else {
photo = image.src.replace(".png", "Neg.png");
image.src = photo;
}
}
</script>
</body>
</html>
