In my code I have five radio buttons with one set checked by default. When I click on a radio button the function setMode() is called but the test to check which button is checked fails.
When the same radio button is clicked a second time setMode() is called the test will return true.
The test is if(document.getElementById("rcool").checked)
I have tried changing the mouse events and the test eg. .checked=="true" and .checked=="checked".
I have searched and only found similar topics in jQuery which I am unfamiliar with so could not make sense of them.
I am using Firefox 47.0 and have checked for errors using Firebug 2.0.17.
I am not very sure how to use Firebug and don't know what to try next.
Any help or comments are greatly appreciated.
var options = ["power=off","mode=heat","temp=20"];
var temp = 20;
function power() {
var pwr = document.getElementById("powerBtn");
var pwrtxt;
if(pwr.innerHTML=="OFF"){
pwrtxt = "power=on";
pwr.innerHTML = "ON";
}
else {
pwrtxt = "power=off";
pwr.innerHTML = "OFF";
}
options[0] = pwrtxt;
document.getElementById("textOutput").value = options;
}
function setMode(){
if(document.getElementById("rheat").checked)
options[1] = "mode=heat";
if(document.getElementById("rcool").checked)
options[1] = "mode=cool";
if(document.getElementById("rdry").checked)
options[1] = "mode=dry";
if(document.getElementById("rauto").checked)
options[1] = "mode=auto";
if(document.getElementById("recono").checked)
options[1] = "mode=econo";
document.getElementById("textOutput").value = options;
}
function updateTemp(){
var tempString = "temp=";
options[2] = tempString.concat("",temp);
document.getElementById("textOutput").value = options;
}
function increaseTemp(){
temp += 1;
if(temp>31) {
temp = 31;
}
updateTemp();
}
function decreaseTemp(){
temp -= 1;
if(temp < 16){
temp = 16;
}
updateTemp();
}
function stopTime(){
}
function startTime(){
}
function incTime(){
}
function decTime(){
}
<!DOCTYPE html>
<html>
<body>
<button type="button" id="powerBtn" onmouseup="power()">OFF</button>
<button type="button" id="increase" onmouseup="increaseTemp()">Up</button>
<button type="button" id="decrease" onmouseup="decreaseTemp()">Down</button>
<br>
<input type="radio" id="rheat" name="mode" onmouseup="setMode()" value="heat" checked="checked">HEAT<br>
<input type="radio" id="rcool" name="mode" onmouseup="setMode()" value="cool">COOL<br>
<input type="radio" id="rdry" name="mode" onmouseup="setMode()" value="dry">DRY<br>
<input type="radio" id="rauto" name="mode" onmouseup="setMode()" value="auto">AUTO<br>
<input type="radio" id="recono" name="mode" onmouseup="setMode()" value="econo">ECONOCOOL<br>
<br>
<button type="button" id="stopTmr" onmouseup="stopTime()">Stop Time</button>
<button type="button" id="startTimer" onmouseup="startTime()">Start Timer</button>
<br>
<button type="button" id="incTime" onmouseup="incTime()">Increase Time</button>
<button type="button" id="decTime" onmouseup="decTime()">Decrease Time</button>
<form action="action_page.php">
<textarea id="textOutput" name="message" rows="10" cols="30"></textarea>
<br>
<input type="submit">
</form>
</body>
</html>
To launch a function when a radio button is clicked, you must use onchange event, not onclick/onmouseup. onchange gracefully wait for the radio button to be effectively clicked/updated before calling the function.
var options = ["power=off","mode=heat","temp=20"];
var temp = 20;
window.onload=function(){document.getElementById("textOutput").value = options;}
function power() {
var pwr = document.getElementById("powerBtn");
var pwrtxt;
if(pwr.innerHTML=="OFF"){
pwrtxt = "power=on";
pwr.innerHTML = "ON";
}
else {
pwrtxt = "power=off";
pwr.innerHTML = "OFF";
}
options[0] = pwrtxt;
document.getElementById("textOutput").value = options;
}
function setMode(){
if(document.getElementById("rheat").checked)
options[1] = "mode=heat";
if(document.getElementById("rcool").checked)
options[1] = "mode=cool";
if(document.getElementById("rdry").checked)
options[1] = "mode=dry";
if(document.getElementById("rauto").checked)
options[1] = "mode=auto";
if(document.getElementById("recono").checked)
options[1] = "mode=econo";
document.getElementById("textOutput").value = options;
}
function updateTemp(){
var tempString = "temp=";
options[2] = tempString.concat("",temp);
document.getElementById("textOutput").value = options;
}
function increaseTemp(){
temp += 1;
if(temp>31) {
temp = 31;
}
updateTemp();
}
function decreaseTemp(){
temp -= 1;
if(temp < 16){
temp = 16;
}
updateTemp();
}
function stopTime(){
}
function startTime(){
}
function incTime(){
}
function decTime(){
}
<!DOCTYPE html>
<html>
<body>
<button type="button" id="powerBtn" onmouseup="power()">OFF</button>
<button type="button" id="increase" onmouseup="increaseTemp()">Up</button>
<button type="button" id="decrease" onmouseup="decreaseTemp()">Down</button>
<br>
<input type="radio" id="rheat" name="mode" onchange="setMode()" value="heat" checked="checked">HEAT<br>
<input type="radio" id="rcool" name="mode" onchange="setMode()" value="cool">COOL<br>
<input type="radio" id="rdry" name="mode" onchange="setMode()" value="dry">DRY<br>
<input type="radio" id="rauto" name="mode" onchange="setMode()" value="auto">AUTO<br>
<input type="radio" id="recono" name="mode" onchange="setMode()" value="econo">ECONOCOOL<br>
<br>
<button type="button" id="stopTmr" onmouseup="stopTime()">Stop Time</button>
<button type="button" id="startTimer" onmouseup="startTime()">Start Timer</button>
<br>
<button type="button" id="incTime" onmouseup="incTime()">Increase Time</button>
<button type="button" id="decTime" onmouseup="decTime()">Decrease Time</button>
<form action="action_page.php">
<textarea id="textOutput" name="message" rows="10" cols="30"></textarea>
<br>
<input type="submit">
</form>
</body>
</html>
Normally I put listeners on those radio buttons and identify them when they are clicked. It seems you prefer the old school way of doing it so I didn't change much in your code but added a paramter in your setMode() function called mode. Basically the mode is already defined when setMode() is called so you don't have to check each radio button anymore. switch() here can assign relative value to options[1] according to mode. Have a go with it and good luck.
var options = ["power=off","mode=heat","temp=20"];
var temp = 20;
function power() {
var pwr = document.getElementById("powerBtn");
var pwrtxt;
if(pwr.innerHTML=="OFF"){
pwrtxt = "power=on";
pwr.innerHTML = "ON";
}
else {
pwrtxt = "power=off";
pwr.innerHTML = "OFF";
}
options[0] = pwrtxt;
document.getElementById("textOutput").value = options;
}
function setMode( mode ){
switch ( mode ) {
case 'rheat':
options[1] = "mode=heat";
break;
case 'rcool':
options[1] = "mode=cool";
break;
case 'rdry':
options[1] = "mode=dry";
break;
case 'rauto':
options[1] = "mode=auto";
break;
case 'recono':
options[1] = "mode=econo";
break;
}
document.getElementById("textOutput").value = options;
}
function updateTemp(){
var tempString = "temp=";
options[2] = tempString.concat("",temp);
document.getElementById("textOutput").value = options;
}
function increaseTemp(){
temp += 1;
if(temp>31) {
temp = 31;
}
updateTemp();
}
function decreaseTemp(){
temp -= 1;
if(temp < 16){
temp = 16;
}
updateTemp();
}
function stopTime(){
}
function startTime(){
}
function incTime(){
}
function decTime(){
}
<button type="button" id="powerBtn" onmouseup="power()">OFF</button>
<button type="button" id="increase" onmouseup="increaseTemp()">Up</button>
<button type="button" id="decrease" onmouseup="decreaseTemp()">Down</button>
<br>
<input type="radio" id="rheat" name="mode" onmouseup="setMode('rheat')" value="heat" checked="checked">HEAT<br>
<input type="radio" id="rcool" name="mode" onmouseup="setMode('rcool')" value="cool">COOL<br>
<input type="radio" id="rdry" name="mode" onmouseup="setMode('rdry')" value="dry">DRY<br>
<input type="radio" id="rauto" name="mode" onmouseup="setMode('rauto')" value="auto">AUTO<br>
<input type="radio" id="recono" name="mode" onmouseup="setMode('recono')" value="econo">ECONOCOOL<br>
<br>
<button type="button" id="stopTmr" onmouseup="stopTime()">Stop Time</button>
<button type="button" id="startTimer" onmouseup="startTime()">Start Timer</button>
<br>
<button type="button" id="incTime" onmouseup="incTime()">Increase Time</button>
<button type="button" id="decTime" onmouseup="decTime()">Decrease Time</button>
<form action="action_page.php">
<textarea id="textOutput" name="message" rows="10" cols="30"></textarea>
<br>
<input type="submit">
</form>
Related
I am working on a web store which offers 2 pre-assigned options (buy two for XX and buy 3 for XY). I also added a normal - 0 + system whith which the customer can select a different number of products.
I wrote a little code which works fine for +- or 2,3 alone, but if i wanna decrease a number added by 2,3 buttons, it doesn't go from 3 to 2 but to 0 or -1.
So, i want to be able to select pre-defined option 2 or 3 but i also want it to be editable by +- buttons.
Any suggestions?
<button class="gumb_shop2" onclick="spremembax()">2 for 10,99 €</button>
<button class="gumb_shop3" onclick="spremembay()">3 for 8,99 €</button>
<button class="plus" onclick="buttonClickUP();">+</button>
<input type="text" id="gumb2" value="0"></input>
<button class="plus" onclick="buttonClicDOWN();">-</button>
<input type="text" id="order" value="ORDER NOW"></input>
<script>
function spremembax() {
document.getElementById("gumb2").value = "2";
}
function spremembay() {
document.getElementById("gumb2").value = "3";
}
var i = 0;
function buttonClickUP() {
i++;
document.getElementById('gumb2').value = i;
if (i <= 0) {
i = 0;
display(i);
}
}
var i = 0;
function buttonClickDOWN() {
i--;
document.getElementById('gumb2').value = i;
if (i <= 0) {
i = 0;
display(i);
}
}
</script>
As I already mention in the comment, you have a typo in buttonClicDOWN .......missing k. You directly increment/decrement the value of the element. Please see the modified functions:
<button class="gumb_shop2" onclick="spremembax()">2 for 10,99 €</button>
<button class="gumb_shop3" onclick="spremembay()">3 for 8,99 €</button>
<button class="plus" onclick="buttonClickUP();">+</button>
<input type="text" id="gumb2" value="1"></input>
<button class="plus" onclick="buttonClickDOWN();">-</button>
<input type="text" id="order" value="ORDER NOW"></input>
<script>
function spremembax() {
document.getElementById("gumb2").value = "2";
}
function spremembay() {
document.getElementById("gumb2").value = "3";
}
function buttonClickUP() {
var el = document.getElementById('gumb2');
el.value = Number(el.value) + 1;
}
function buttonClickDOWN() {
var el = document.getElementById('gumb2');
if(el.value == 1) return false;
el.value = Number(el.value) - 1;
}
</script>
I'd have this added as a comment, but was not able to for missing rep. So an answer:
In simple terms: you are not updating your global variable i when pressing the 2 or 3 button, so when you in/decrease i and assign it to the value property, you do override the old value.
I would recommend to drop the i (global) variable and just to work with the value property, e.g.
function buttonClickDOWN() {
var elm = document.getElementById('gumb2');
if (elm.value > 0)
elm.value--;
else
elm.value = 0;
}
P.S.: as you are using a text type input, you might also want to consider non-numbers the user might have entered.
Why not simply use input type="number"?
<button class="gumb_shop2" onclick="gumb2.value=2">2 for 10,99 €</button>
<button class="gumb_shop3" onclick="gumb2.value=3">3 for 8,99 €</button>
<input type="number" id="gumb2" value="1" step="1" min="1" />
<input type="button" id="order" value="ORDER NOW" />
Here's a simple example that that meets your specs:
<button onclick="setAbs(event)" data-val="2">2 for 10,99 €</button>
<button onclick="setAbs(event)" data-val="3">3 for 8,99 €</button><br/><br/>
<button onclick="down()">-</button>
<input size="2" id="counter" value="0" />
<button onclick="up()">+</button><br/><br/>
<input type="submit" value="Submit" />
<script>
let counter = document.getElementById("counter");
function setAbs(event){
counter.value = event.target.dataset.val;
}
function up(){
counter.value = parseInt(counter.value) + 1;
}
function down(){
if(counter.value > 0){
counter.value = parseInt(counter.value) - 1;
}
}
</script>
this is the answer i was looking for.
Thank you #Mamun for quick response.
<button class="gumb_shop2" onclick="spremembax()">2 for 10,99 €</button>
<button class="gumb_shop3" onclick="spremembay()">3 for 8,99 €</button>
<button class="plus" onclick="buttonClickUP();">+</button>
<input type="text" id="gumb2" value="1"></input>
<button class="plus" onclick="buttonClickDOWN();">-</button>
<input type="text" id="order" value="ORDER NOW"></input>
<script>
function spremembax() {
document.getElementById("gumb2").value = "2";
}
function spremembay() {
document.getElementById("gumb2").value = "3";
}
function buttonClickUP() {
var el = document.getElementById('gumb2');
el.value = Number(el.value) + 1;
}
function buttonClickDOWN() {
var el = document.getElementById('gumb2');
if(el.value == 1) return false;
el.value = Number(el.value) - 1;
}
</script>
Hi I am developing calculator in javascript just for exercise purpose. this is my Html code.
<h1 id="h1">Calculator</h1>
<input type="text" id="vaLue" name="val1">
<input type="submit" value="+" onclick="cal()" id="plus">
<input type="submit" value="-" onclick="cal()" id="minus">
<input type="submit" value="*" onclick="cal()" id="mul">
<input type="submit" value="/" onclick="cal()" id="devide">
<input type="submit" value="=" onclick="cal()" id="equal">
javascript code
function cal(){
var val1 = document.getElementById('vaLue').value;
var errormessage = 'enter value';
var plu= document.getElementById('plus').value;
var minu= document.getElementById('minus').value;
var mult= document.getElementById('mul').value;
var div= document.getElementById('devide').value;
var equ= document.getElementById('equal').value;
if( val1.length == 0) {
var error = document.getElementById('error');
error.innerHTML= errormessage;
return;
}
if (val1.length != 0){
var bt=document.getElementById('h1');
calc= val1+plu;
bt.innerHTML=calc;
val1=null;
}
}
I want to use these operator buttons as submit button to be used randomly according to their functions. I thought to convert them to radio buttons with same name attribute but I don't know how to make radio button act as submit button too.
also if you can tell me how to define variable value null.
thanks for your expert advice in advance.
Regards
Dheeraj
Hope you are lookiing something like this..
var sum = 0;
var inputVal = document.getElementById('vaLue');
function div() {
var inputNum = parseFloat(inputVal.value) || 0;
showResult(sum / inputNum);
}
function mul() {
var inputNum = parseFloat(inputVal.value) || 0;
showResult(sum * inputNum);
}
function sub() {
var inputNum = parseFloat(inputVal.value) || 0;
showResult(sum - inputNum);
}
function add() {
var inputNum = parseFloat(inputVal.value) || 0;
showResult(sum + inputNum);
}
function showResult(value) {
sum = value
document.getElementById('result').innerHTML = value;
}
#result {
font-weight: bold;
}
<h1 id="h1">Calculator</h1>
<input type="text" id="vaLue" name="val1">
<input type="submit" value="+" onclick="add()" id="plus">
<input type="submit" value="-" onclick="sub()" id="minus">
<input type="submit" value="*" onclick="mul()" id="mul">
<input type="submit" value="/" onclick="div()" id="devide">
<div id="result">0</div>
var sum = 0;
var inputVal = document.getElementById('vaLue');
function div() {
var inputNum = parseFloat(inputVal.value) || 0;
showResult(sum / inputNum);
}
function mul() {
var inputNum = parseFloat(inputVal.value) || 0;
showResult(sum * inputNum);
}
function sub() {
var inputNum = parseFloat(inputVal.value) || 0;
showResult(sum - inputNum);
}
function add() {
var inputNum = parseFloat(inputVal.value) || 0;
showResult(sum + inputNum);
}
function showResult(value) {
sum = value
document.getElementById('result').innerHTML = value;
}
#result {
font-weight: bold;
}
<h1 id="h1">Calculator</h1>
<input type="text" id="vaLue" name="val1">
<input type="submit" value="+" onclick="add()" id="plus">
<input type="submit" value="-" onclick="sub()" id="minus">
<input type="submit" value="*" onclick="mul()" id="mul">
<input type="submit" value="/" onclick="div()" id="devide">
<div id="result">0</div>
I'm trying to make JavaScript calculator. I want to create simple addition function in JavaScript but didn't know how to build that logic, need someone help, and in my code one input text field is present.
Code contain input buttons which is numbers now I need help. So how do I do addition function in JavaScript?
function plus()
{
var textInputval=0;
var textInputval1=2;
var temp=0;
textInputval = parseInt(document.getElementById('new').value);
textInputval1 = parseInt(document.getElementById('new').value);
temp = textInputval + textInputval1;
console.log(textInputval);
console.log(textInputval1);
}
<div id = "cal-container">
<form name="calculator">
<input type="text" name="answer" value="" id="new">
<br>
<input type="button" value=" 1 " onclick="one()" />
<input type="button" value=" 2 " onclick="two()" />
<input type="button" value=" 3 " onclick="three()" />
<input type="button" value=" + " onclick="plus()" />
</form>
</div>
function action(method) {
var a = parseInt(document.getElementById("num1").value);
var b = parseInt(document.getElementById("num2").value);
var result = null;
switch (method) {
case 'add':
result = a + b;
break;
case 'subtract':
result = a - b;
break;
case 'multiply':
result = a * b;
break;
case 'divide':
if (b != 0) {
result = a / b;
} else {
alert('Can\'t divide by 0');
return;
}
break;
}
if (result !== null) {
document.getElementById("result").value = result;
} else {
document.getElementById("num1").value = "";
document.getElementById("num2").value = "";
document.getElementById("result").value = "";
}
}
<span style="margin-right:1px">Number 1 </span>
<input id="num1" type="number"></br>
<span style="margin-right:5px">Number 2</span><input id="num2" type="number"></br>
<span style="margin-right:29px">Result</span><input id="result" type="number"> </br>
<button id="add" onclick="action('add')">+</button>
<button id="subtract" onclick="action('subtract')">-</button>
<button id="multiply" onclick="action('multiply')">*</button>
<button id="divide" onclick="action('divide')">/</button>
<button id="clear" onclick="action('clear')">clear</button>
I want to total the values of all input, but in the beginning there's only one input element and you add the clone(s) with a button. Actually I have two issues:
1. How to place the clone node always under the node before it.
2. How to total the values of all nodes.
Here's the code:
function nambahData() {
var a = document.getElementById("harga");
var b = a.cloneNode(false);
document.getElementById("form").appendChild(b);
}
function ditotal() {
var x = document.getElementById("harga").value;
var y = document.getElementById("harga").childNode.value;
document.getElementById("total").value = parseInt(x) + parseInt(y);
}
</script>
<div id="form">
<input id="harga" type=number>
<br>
</div>
<button onclick="nambahData()">add data</button>
<br>
<button onclick="ditotal()">total all</button>
<input id="total" type=number>
Hope this helps you ..
window.nambahData = function() {
var a = document.getElementsByName("harga");
var b = a[0].cloneNode(false);
document.getElementById("form").appendChild(b);
}
window.ditotal = function() {
var totalItems = 0;
for(i=document.getElementsByName("harga").length-1;i>=0;i--)
{
var item = document.getElementsByName("harga")[i];
totalItems += parseFloat(item.value);
}
document.getElementById("total").value = totalItems;
}
.inputStyle{
display:block;
}
<div id="form">
<input name="harga" type="number" class="inputStyle">
</div>
<button onclick="nambahData()">add data</button>
<br>
<button onclick="ditotal()">total all</button>
<input id="total" type=number>
im new at this.So, what I want is to hide the RESET button when the clock is working and it should appear when the clock is stoped.same with STOP button that it must only appear when the clock is working.This all must be done with simple and basic Java Script.I dont know about Jquery.
<script language="javascript">
var t1;
var t2;
var t3;
function fn_sample() {
document.frm.txtS.value = parseInt(document.frm.txtS.value) + 1;
t1 = document.frm.txtS.value;
if(t1>60){
document.frm.txtS.value = 0;
fn_incMin();
}
window.setTimeout("fn_sample()", 1000);
}
function fn_incMin() {
document.frm.txtM.value = parseInt(document.frm.txtM.value) + 1;
t2 = document.frm.txtM.value;
if(t2>60){
document.frm.txtM.value = 0;
fn_incHrs();
}
window.setTimeout("fn_incMin()", 60000);
}
function fn_incHrs() {
document.frm.txtH.value = parseInt(document.frm.txtH.value) + 1;
t3 = document.frm.txtH.value;
window.setTimeout("fn_incHrs()", 3600000);
}
function fn_stop() {
window.clearTimeout(t1);
window.clearTimeout(t2);
window.clearTimeout(t3);
}
function fn_reset() {
document.frm.txtS.value = 0;
document.frm.txtM.value = 0;
document.frm.txtH.value = 0;
}
</script>
</head>
<body>
<form name="frm">
<input type="text" name="txtH" value="0" size="2"/>
<input type="text" name="txtM" value="0" size="2"/>
<input type="text" name="txtS" value="0" size="2"/>
<br /><br />
<input type="button" value="Start" onclick="fn_sample();" />
<input type="button" value="Stop" onclick="fn_stop();" />
<input type="button" value="Reset" onclick="fn_reset();" />
</form>
</body>
You could do like this
<input type="button" value="Start" onclick="fn_sample();this.form.reset.style.display='none'" />
<input type="button" value="Stop" onclick="fn_stop();this.form.reset.style.display='inline'" />
<input type="button" value="Reset" name='reset' onclick="fn_reset();" />
or you coud also use the disable property
<input type="button" value="Start" onclick="fn_sample();this.form.reset.disabled=true" />
<input type="button" value="Stop" onclick="fn_stop();this.form.reset.disabled=false" />
<input type="button" value="Reset" name='reset' onclick="fn_reset();" />
Basically, you'd want to have a onclick property on the buttons like this:
var stopClicked = function(){
document.getElementById("stop").style.display = "none";
document.getElementById("reset").style.display = "";
}
var resetClicked = function(){
document.getElementById("stop").style.display = "";
document.getElementById("reset").style.display = "none";
}
<button onclick='stopClicked()' id='stop'>Stop</button>
<button onclick='resetClicked()' id='reset'>Reset</button>
It's not pretty, but help you undestand whats happends
<script language="javascript">
var t1;
var t2;
var t3;
var st1, st2, st3;
function fn_sample() {
document.getElementById('reset').style.display = 'none';
document.getElementById('start').style.display = 'none';
document.getElementById('stop').style.display = 'inline-block';
running = true;
document.frm.txtS.value = parseInt(document.frm.txtS.value) + 1;
t1 = document.frm.txtS.value;
if(t1>60){
document.frm.txtS.value = 0;
fn_incMin();
}
st1 = window.setTimeout("fn_sample()", 1000);
}
function fn_incMin() {
document.frm.txtM.value = parseInt(document.frm.txtM.value) + 1;
t2 = document.frm.txtM.value;
if(t2>60){
document.frm.txtM.value = 0;
fn_incHrs();
}
st2 = window.setTimeout("fn_incMin()", 60000);
}
function fn_incHrs() {
document.frm.txtH.value = parseInt(document.frm.txtH.value) + 1;
t3 = document.frm.txtH.value;
st3 = window.setTimeout("fn_incHrs()", 3600000);
}
function fn_stop() {
document.getElementById('reset').style.display = 'inline-block';
document.getElementById('start').style.display = 'inline-block';
document.getElementById('stop').style.display = 'none';
window.clearTimeout(st1);
window.clearTimeout(st2);
window.clearTimeout(st3);
}
function fn_reset() {
document.frm.txtS.value = 0;
document.frm.txtM.value = 0;
document.frm.txtH.value = 0;
}
</script>
</head>
<body>
<form name="frm">
<input type="text" name="txtH" value="0" size="2"/>
<input type="text" name="txtM" value="0" size="2"/>
<input type="text" name="txtS" value="0" size="2"/>
<br /><br />
<input id="start" type="button" value="Start" onclick="fn_sample();"style="display:inline-block" />
<input id="stop" type="button" value="Stop" onclick="fn_stop();" style="display:none" />
<input id="reset" type="button" value="Reset" onclick="fn_reset();" style="display:inline-block" />
</form>
</body>
What is inside:
variables st1, st2, st3 are handlers to setTimeout (in your code STOP button doesn't work)
window.setTimeout returns handler to use with clearTimeout
all fields have style proporty which shows or hide buttons on start
document.getElementById('stop') gets element and style.display = 'inline-block'; sets visible on element or hide to hide element
on Start show some buttons and hide unnecessary, on Stop show others and hide unnecessary.
And thats all. In pure JS. this is fiddle to test it: https://jsfiddle.net/6qz30eae/