How do I completely clear a value in an element

Question

After working with a value in an element, I use element.innerHTML =0 to initialize the value to zero, but when I try to work with the same element again, it still retains the old value which gives a completely different result.
https://code.sololearn.com/WUBSf7gD0cJ1/?ref=app

Answer 1

kingSab
here is my fix.
I would suggest a better css though. One that relies on position: absolute is not ideal.

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

Answer 2

You forgot to attach your code link in post Description. No way to tell without any code review.

If it is an <input> element, you need to adjust the `value` property, not the `innerHTML` property.

Answer 3

kingSab
How this game was supposed to work though? I need to understand that first ...

Answer 4

kingSab
css is not working here.

your css code seems to have a lot of hidden characters in the indentation.

maybe the same in other tabs.

Perhaps your ide is using special characters that's being copy pasted and messing up your code?

Answer 5

Thank you Bob_Li ,I'll do just that

Answer 6

Ipang
Ok player inputs a number from one to 9, the computer shuffles number from one to 9 and then randomly Outputs a number btwn 1 and 9. If the number is == what the player predicted. The players wins.

Winner reward.

The player with the radio button selects what multiplier he prefers, 2 will give him 3 chances to play but will only give him x2 of his stake, 4 will give him 2 chances to play but will x4 his stake if win, 8 will give him 1 chance to play but will x8 his stake if win. And the winning will be added to the balance.

If lose
The stake will be deducted from the player stake (id=fig).

There are some minor functionalities but this is the major one

Answer 7

Thank you Bob_Li 😊, I am still learning and I believe doing projects will enhance my skills, I'm not very good with css, but thanks for the assistance, that wss exactly what I needed on the plus and minus

Answer 8

kingSab
try learning about css grid and flexbox. These two can cover about 90% of HTML DOM element organization.

Avoid hardcoding the layout with position:absolute. You'll end up with layouts that are inflexible to different screen sizes.

if you're wondering, I used +element.textContent or +element.value to convert string to number because the screen is small and using Number(element.textContent) takes up a lot of space in Sololearn app in my phone.

Answer 9

Bob_Li
What's left now is for me to fix the css for better UI
Then more functionalities like;
1. A playing-chance bar, that will decrease as the player fails each guess
2. A screen that will prompt the player to quit or continue when he exhaust his chances and stake.

I don't mean that you do it for me. I'm just saying.
I'll try my best on it then will call for help if I need any.

Thanks again. 😊

Answer 10

kingSab
yes, and also the ability to set the bet increments to arbitrrary values other than 50.
One more thing I could think of is auto stop per round. Instead of having to manually press the play/stop button, maybe an switch for auto stop or manual stop.

edit--
I updated my code. User guess now uses a click to increment button instead of the inconvenient input box and keyboard.
You click on the black user select number box to cycle from 1 to 9 endlessly to change your number.

It is a good use case for generator functions. Relevant codes are at the bottom part of the js code.

Answer 11

Bob_Li

I'll check it out. Thanks a lot. I appreciate you help 🙏🏽

Answer 12

Bob_Li

Ok, I like idea on the incremental on-click, but then the radio button isn't doing what it's expected to. I'm back from work now I'll work on it using you ideas. I want it to;
2- give the user 3 chances to play and not deduct his stake until the 3 chances are exhausted but will only *2 his stake if win

4- give the user 2 chances to play and not deduct his stake until the 2 chances are exhausted but will *4 his stake if win

8- give the user 1 chance to play and not deduct his stake until the 1 chance is exhausted but will *8 his stake if win

Answer 13

I really do have a lot to learn from your code
From the CSS to the increment right to the plus and minus. I really do appreciate. You've been of immense help.

Answer 14

kingSab
Sounds good. maybe hearts indicator for chances.

The bets multiplier right now are working sort of the same way as your plan.. If you select 8 instead of 4 or 2, you might win bigger, but you also lose faster.

But yes, maybe extra chances before bet collection will make the odds of winning greater, and retain player interest.

I'll give this a rest for now.

If you encounter any more obstacles, post a new topic.

The mods might feel this post is getting too long.

I'm sure there are many more people here that can help you out.

Answer 15

Bob_Li one more favor please, can you please add comments on the functionalities you added. It's getting complicated for me

Answer 16

Bob_Li yes I'm reading through it and studying. You are awesome sir. Thanks a lot. 🙏🏽

Answer 17

if you are appending DOM element nodes as children to the element, you might use element.innerHTML ="", or element.children.length=0 to clear it. But as others have suggested, it depends on what you are trying to clear.

Answer 18

Bob_Li Mirielle Ipang here is the code. I don't know why it's not running here but it's running perfectly on my system.

But here is the problem, on the minus function the last function on JS. I'm trying to clear the value in the fig Div element, it clears but when I try to use it again it still adds up the last figure after I cleared it

I'm sorry I might not be very clear here and let me know If there's more I need to do to make u understand. I'm also trying the get the code to work here

Answer 19

kingSab
updated version with modified css and 3 chances before bet collection.
Also added a 1 option for bets multiplier.

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

Answer 20

Bob_Li thank you, I like the heart thing. But then what is the function of the 1multiplier, remember the work of the multiplier, the give the player (x)* of his stake. Also the player should have a choice whether to continue player or not after the first exhaustion of hearts♥