I have my HTML web page, and a mobile application.
In my mobile application I have three buttons, start, pause and stop, I have these same three buttons on my website (On my website these three buttons already have actions).
What I want to do is if I click the button on my mobile phone, it clicks the same designated button on my web page.
Mi initial plan was, from my mobile application I send via post to a php file inside my website files. Then from that php file send a simple variable to a JavaScript file, where that JavaScript file would read what variable it is, and depending on that variable it would perform the click on my corresponding button in my webpage.
The script I'm using on my website is inside my HTML code.
Website:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/test"></script>
<title> Spelling Bee </title>
</head>
<body>
<header>
<h1> Spelling Bee </h1>
</header>
<section>
<div id="textbox">
<h2> "Word" </h2>
</div>
<div>
<p> Choose the difficulty: </p>
<select id="difficulty">
<option value="0"></option>
<option value = "1"> Easy </option>
<option value = "2"> Medium </option>
<option value = "3"> Hard </option>
</select>
<div id="timer"></div>
<button id="start"> Start! </button>
<button id="next"> Next </button>
<button id="stop"> Stop </button>
<script>
//1000 = 1 sec
var start= document.getElementById("start");
var difficulty = document.getElementById("difficulty")
var next = document.getElementById("next");
var stop = document.getElementById("stop");
var timer;
document.getElementById("timer").innerHTML = "-";
document.getElementById("start").disabled = true;
document.getElementById("next").disabled = true;
document.getElementById("stop").disabled = true;
start.addEventListener("click", functionStart);
var seconds, stop, counterStarted = false, counter;
var select_difficulty= document.getElementById('difficulty');
select_difficulty.onchange = function select_stop_time() {
var selectedValue = select_difficulty.options[select_difficulty.selectedIndex].value;
if (selectedValue == 1 ) {
document.getElementById("start").disabled = false;
stop = 10;//10
}
else if (selectedValue == 2 ) {
document.getElementById("start").disabled = false;
stop = 15;//15
}
else if (selectedValue == 3 ){
document.getElementById("start").disabled = false;
stop = 20;//20
}
else {
document.getElementById("start").disabled = true;
document.getElementById("next").disabled = true;
document.getElementById("stop").disabled = true;
stop = 0;//0
}
}
function functionStart() {
seconds = 1;
document.getElementById('difficulty').disabled = true;
document.getElementById("start").disabled = true;
document.getElementById("next").disabled = false;
document.getElementById("stop").disabled = false;
if(counterStarted === false){
counterStarted = true;
counter = setInterval(function(){
if(seconds <= stop){
document.getElementById("timer").innerHTML = seconds;
seconds++;
}
else{
seconds = 1;
}
},1000)
}
}
stop.addEventListener("click", functionStop);
function functionStop(){
document.getElementById("timer").setAttribute("disabled", "disabled");
clearInterval(counter);
counterStarted = false;
document.getElementById('difficulty').disabled = false;
document.getElementById("timer").innerHTML = "-";
document.getElementById("start").disabled = false;
document.getElementById("next").disabled = true;
document.getElementById("stop").disabled = true;
frame();
}
next.addEventListener("click", functionNext);
function functionNext(){
seconds = stop;
}
</script>
</div>
</section>
<footer>
</footer>
</body>
</html>
Mobile Application: -HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title> Spelling Bee </title>
<!-- grupo CSS -->
<link rel="stylesheet" href="css/jquery.mobile.icons-1.4.5.min.css"/>
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css"/>
<link rel="stylesheet" href="css/theme_sb.min.css"/>
<!--grupo JavaScript-->
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/acciones.js"></script>
<script src="phonegap.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="principal" style="background-image: url(imagenes/honeycomb.png); text-align:center;">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1> Spelling Bee </h1>
</div>
<div data-role="main" class="ui-content" style="width: 30%; margin-left: 32%; margin-top: 45%;">
<div id="buttons">
<input type="button" class="ui-btn" id="button1" value="Start!">
<input type="button" class="ui-btn" id="button2" value="Next">
<input type="button" class="ui-btn" id="button3" value="Stop!">
</div>
</div>
<div data-role="footer" align="center" data-theme="a" data-position="fixed">
<h4> Spelling Bee </h4>
<img src="imagenes/bee.png" width="60">
</div>
</div>
</body>
</html>
-JavaScript
// JavaScript Document
$(document).ready(function(e) {
$('#button1').on('click',function(){
alert("1");
});//1
$('#button2').on('click',function(){
alert("2");
});//2
$('#button3').on('click',function(){
alert("3");
});//3
}); //ready
I put alerts to test it.
