Change onclick of a button with a different button

Question

I'm making a clicker game and I have been having a lot of trouble figuring this out. i have a button called earn gold that makes the total value of gold go up by 1. then I have upgrade button (my problem) which I want to upgrade the earn gold button to make it add 2. and I also want it to a cost of like 50 gold. can someone help me out?

Answer 1

You cannot change the function used in the onclick attribute and keep the parameter ^^
And even, for changing the code of any event attribute dynamically (with JS at runtime rather than inline hardcoded), you need to set a function, not a string value...

To follow your first track, you can do:

document.getElementById('gButton').onclick = function(){ earnGold(2); };

... wich is the same than setting 'onclick="earnGold(2);"' hardcoded in the tag...

No real need of a second earnGold2() function, as you only have to change the parameter ;) But if you want it absolutly, rather change by:

document.getElementById('gButton').onclick = function(){ earnGold2(1); };

Answer 2

cause I changed the correct answer to the one that helped me solve my problem :)

Answer 3

hahah. and I came across another error. when I'm gonna do the 3rd upgrade OT automatically does it. like?it doesn't sot?for me to hit the button

Answer 4

Thank you! now is there a way to subtract like 50, when I'm clicking the upgrade button

Answer 5

lol I lied. I have another question. ill show you my code. I'm trying to make it so after I have hit the upgrade button it makes it 4 per click. and changes the cost to 100. I think if I can figure this out ill be good to go!

Answer 6

https://code.sololearn.com/WfzUldA9z02G/?ref=app

Answer 7

here is my code
https://code.sololearn.com/WfzUldA9z02G/?ref=app

Answer 8

thanks! your being such a great help

Answer 9

Set 'earnGold(-50)' in the function body you assign to the event listener if you want substract 50 each time button is clicked, or just call it in the upgrade() function if you want substract 50 only once ;)

Answer 10

last question lol. I have it so when I have >= 50 gold it calls the upgrade function. now how can I make it so the buttons text changes to say Upgrade 2? And how do i set it up for the next upgrade? thanks for your help

Answer 11

Yes I can... but there are many ways to achieve your goal: can you provide your code for help you in a well suited way ?

One (simple) way would be to have a global variable 'gold_inc' set to 1 at start, that you could change at any time independently of the place where it's used:

<div onclick="gold = gold + gold_inc;">gold!</div>
<input type="button" onclick="gold_inc *= 2" value="double gold_inc">
<script>
var gold = 0;
var gold_inc = 1;
</script>

Answer 12

Cleaned, and simplified:

https://code.sololearn.com/Wje9o9N2959p/?ref=app

(I hope that's the behaviour your expect)

> global variables added to handle gold incrementation (earnGold()) with or without parameter (without use the global variable default, with use specified value)
> global variables added to handle indexation of list (array) of gold incrementation and cost parameters to be able to use only one upgrade() function
> so change in html to set onclick attribute with call of earnGold() without specifying parameter
> html reindented and cleaned from deprecated tag <font> (replaced by <span>) and css externalized
> js reindented and cleaned (function upgrade2() was inside upgrade1() declaration: not blocking mistake in this case, but could be in others context)

Answer 13

document.querySelector('#gButton').innerHTML='new button text';

or more classically:

document.getElementById('gButton').innerHTML='new button text';

... for a <button>, while for an <input type="button"> the 'value' attribute carry the button text ^^
In the case of <button>, you can provide any valid html code as content:

document.querySelector('#gButton').innerHTML='new <strong>button</strong> text';

... but plain text is required for <input> 'value' attribute...

And inside the event listener, you can access to the element reference with the 'this' keyword:

<button onclick="this.innerHTML='you hurt me!',">click me!</button>

Answer 14

You have an unexpected ')' at end of your upgrade2() call, at line 10 (upgrade1 function):

if (gold >= 50){ document.getElementById('gButton').onclick = function(){earnGold(2); upgrade2()) }

... should be:

if (gold >= 50){ document.getElementById('gButton').onclick = function(){earnGold(2); upgrade2() }

This fix the JS blocking error, but I doesn't well understand your purpose, so I doesn't know if the behaviour is now what you're expecting ;)

Answer 15

I have hardness to understand your purpose (because of my bad english, maybe also yours ;P -- I see that your localisation is Canada? do you speak french?)... so I've difficulties to see how help you appart correcting explicit errors ^^ Can you try to describe more accuracy what your code is supposed to do?