stackoom
  简体   繁体   中英

What is the reason for my button to not work on first click?

 原文  2019-10-22 05:58:01  7   1    javascript/ html

Question

I think I am having an issue with event handlers not initiating the functions to start off on the first click. taking two clicks to work. then after clicking on further buttons it's like they are a click behind all the way through the process

I am new to coding HTML js together and use this site to solve all my issues. yet I can't find anything that helps me here. sorry if what I need to do is answered and just couldn't find the right post. sorry if I butcher the proper way to post

I tried to put code in head and body in different combinations to see if results change nothing works

 <html> <head> <title>resource farming</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial- scale=1.0"> </head> <body> <p> <button id="mine" onclick="mine()">mine</button> <input type="text" id="credit" value="10000"></input> click mine to gain credit delay to mine is 5seconds </p> <p> <button id="btncoal" onclick="buycoal()">buy coal</button> <input type="text" id="coal" value="1000"> </input> click buy to gain coal cost (10 credit) delayed 7.5seconds </p> <p> <button id="btnironore" onclick="buyironore()">buy iron ore</button> <input type="text" id="ironore" value="1000"></input> click buy to gain iron ore (cost 10 credit) delayed 7.5seconds </p> <p> <button id="btnironbar" onclick="buyironbar()">Buy Iron Bar</button> <input type="text" id="ironbar" value="1000"></input> click buy to gain iron bar (cost 1 coal 1 iron ore)delayed 10seconds </p> <p> <button id="btnsteelbar" onclick="buysteelbar()">buy steel bar</button> <input type="text" id="steelbar" value="0"></input> click to gain steel bar (cost 5coal 2iron bars) delayed 20 seconds </p> <script type="text/javascript" language="javascript"> var credit1 = 10000; var coal1 = 1000; var ironore1 = 1000; var ironbar1 = 1000; var steelbar1 = 0; var sleep = 0; function mine() { document.getElementById('mine').disabled = true; document.getElementById('credit').value = credit1; credit1 = credit1 + 10; sleep = setTimeout(enablemine, 5000); } function enablemine() { document.getElementById('mine').disabled = false; } function buycoal() { if (document.getElementById('credit').value > 10) { document.getElementById('btncoal').disabled = true; document.getElementById('credit').value = credit1; credit1 = credit1 - 10; document.getElementById('coal').value = coal1; coal1 = coal1 + 1; sleep = setTimeout(enablebtncoal, 7500); } else { document.getElementById('credit').value = credit1; document.getElementById('coal').value = coal1; } } function enablebtncoal() { document.getElementById('btncoal').disabled = false; } function buyironore() { if (document.getElementById('credit').value > 10) { document.getElementById('credit').value = credit1; credit1 = credit1 - 10; document.getElementById('ironore').value = ironore1; ironore1 = ironore1 + 1; document.getElementById('btnironore').disabled = true; sleep = setTimeout(enablebtnironore, 7500); } else { document.getElementById('credit').value = credit1; document.getElementById('ironore').value = ironore1; } } function enablebtnironore() { document.getElementById('btnironore').disabled = false; } function buyironbar() { if (document.getElementById('coal').value > 1) { if (document.getElementById('ironore').value > 1) { document.getElementById('coal').value = coal1; coal1 = coal1 - 1; document.getElementById('ironore').value = ironore1; ironore1 = ironore1 - 1; document.getElementById('ironbar').value = ironbar1; ironbar1 = ironbar1 + 1; document.getElementById('btnironbar').disabled = true; sleep = setTimeout(enableironbar, 10000); } } else { document.getElementById('coal').value = coal1; document.getElementById('ironore').value = ironore1; document.getElementById('ironbar').value = ironbar1; } } function enableironbar() { document.getElementById('btnironbar').disabled = false; } function buysteelbar() { if (document.getElementById('coal').value > 5) { if (document.getElementById('ironbar').value > 2) { document.getElementById('coal').value = coal1; coal1 = coal1 - 5; document.getElementById('ironbar').value = ironbar1; ironbar1 = ironbar1 - 2; document.getElementById('steelbar').value = steelbar1; steelbar1 = steelbar1 + 1; document.getElementById('btnsteelbar').disabled = true; sleep = setTimeout(enablesteelbar, 20000); } } else { document.getElementById('coal').value = coal1; document.getElementById('ironbar').value = ironbar1; document.getElementById('steelbar').value = steelbar1; } } function enablesteelbar() { document.getElementById('btnsteelbar').disabled = false; } </script> </body> </html>

desired: every click fires functions applies values in fields adding subtracting according to functions set up

actual results take two clicks for it to work. also seems to be a click behind affecting way more results a click then should be

1 answers

solution1
 0 ACCPTED  2019-10-22 06:18:11

There is no issue with the click. There is a logical error in your code. Let's take the button click "mine". The initial value is "10000" which you set in html. When you click on the "mine", first it set the input value "10000" as you are initializing the value of credit1=10000. And setting the value of input and then you adding the 10 to the original value. So on first click the value will be 10000. Now the value of credit1 = 10000 + 10

On second click the value of credit1=10000 + 10 as you added 10 in previous click.

Please read the comment in the below function.

function mine() {
document.getElementById('mine').disabled = true;
document.getElementById('credit').value = credit1;  // On first click setting the value to 10000 which is the same as previos value
credit1 = credit1 + 10; // Now you are adding 10. This will not reflect in input box. And will show when you click second time.
sleep = setTimeout(enablemine, 5000);

} 

 <html> <head> <title>resource farming</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial- scale=1.0"> </head> <body> <p> <button id="mine" onclick="mine()">mine</button> <input type="text" id="credit" value="10000"></input> click mine to gain credit delay to mine is 5seconds </p> <p> <button id="btncoal" onclick="buycoal()">buy coal</button> <input type="text" id="coal" value="1000"> </input> click buy to gain coal cost (10 credit) delayed 7.5seconds </p> <p> <button id="btnironore" onclick="buyironore()">buy iron ore</button> <input type="text" id="ironore" value="1000"></input> click buy to gain iron ore (cost 10 credit) delayed 7.5seconds </p> <p> <button id="btnironbar" onclick="buyironbar()">Buy Iron Bar</button> <input type="text" id="ironbar" value="1000"></input> click buy to gain iron bar (cost 1 coal 1 iron ore)delayed 10seconds </p> <p> <button id="btnsteelbar" onclick="buysteelbar()">buy steel bar</button> <input type="text" id="steelbar" value="0"></input> click to gain steel bar (cost 5coal 2iron bars) delayed 20 seconds </p> <script type="text/javascript" language="javascript"> var credit1 = 10000; var coal1 = 1000; var ironore1 = 1000; var ironbar1 = 1000; var steelbar1 = 0; var sleep = 0; function mine() { document.getElementById('mine').disabled = true; credit1 = credit1 + 10; document.getElementById('credit').value = credit1; sleep = setTimeout(enablemine, 5000); } function enablemine() { document.getElementById('mine').disabled = false; } function buycoal() { if (document.getElementById('credit').value > 10) { document.getElementById('btncoal').disabled = true; credit1 = credit1 - 10; document.getElementById('credit').value = credit1; coal1 = coal1 + 1; document.getElementById('coal').value = coal1; sleep = setTimeout(enablebtncoal, 7500); } else { document.getElementById('credit').value = credit1; document.getElementById('coal').value = coal1; } } function enablebtncoal() { document.getElementById('btncoal').disabled = false; } function buyironore() { if (document.getElementById('credit').value > 10) { document.getElementById('credit').value = credit1; credit1 = credit1 - 10; ironore1 = ironore1 + 1; document.getElementById('ironore').value = ironore1; document.getElementById('btnironore').disabled = true; sleep = setTimeout(enablebtnironore, 7500); } else { document.getElementById('credit').value = credit1; document.getElementById('ironore').value = ironore1; } } function enablebtnironore() { document.getElementById('btnironore').disabled = false; } function buyironbar() { if (document.getElementById('coal').value > 1) { if (document.getElementById('ironore').value > 1) { coal1 = coal1 - 1; ironbar1 = ironbar1 + 1; ironore1 = ironore1 - 1; document.getElementById('coal').value = coal1; document.getElementById('ironore').value = ironore1; document.getElementById('ironbar').value = ironbar1; document.getElementById('btnironbar').disabled = true; sleep = setTimeout(enableironbar, 10000); } } else { document.getElementById('coal').value = coal1; document.getElementById('ironore').value = ironore1; document.getElementById('ironbar').value = ironbar1; } } function enableironbar() { document.getElementById('btnironbar').disabled = false; } function buysteelbar() { if (document.getElementById('coal').value > 5) { if (document.getElementById('ironbar').value > 2) { document.getElementById('coal').value = coal1; coal1 = coal1 - 5; steelbar1 = steelbar1 + 1; ironbar1 = ironbar1 - 2; document.getElementById('ironbar').value = ironbar1; document.getElementById('steelbar').value = steelbar1; document.getElementById('btnsteelbar').disabled = true; sleep = setTimeout(enablesteelbar, 20000); } } else { document.getElementById('coal').value = coal1; document.getElementById('ironbar').value = ironbar1; document.getElementById('steelbar').value = steelbar1; } } function enablesteelbar() { document.getElementById('btnsteelbar').disabled = false; } </script> </body> </html>

I hope this will help you to resolve this.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question JQUERY Show overlay when button click work only first time. What's wrong? My Javascript code does not work on first click innerHTML works on first button click but doesn't work on second click What is the reason why my media queries wont work react radio button doesn't work on the first click Troubleshooting button need double click to work when first launched html Javascript submit button wont work on first click Promise.then() doesn't work on first button click Hidden button, does not work on the first click after appeared Javascript button onclick doesn't work on first click
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM