#[Basketball scoreboard] if else for button when clicked?

41 messages · Page 1 of 1 (latest)

solar python
#

is there a way to use if else statement on buttons when user clicks on certain buttons?

#

i want to combine guest and home team pointer in a single function such taht when hometeam button is clicked only home team scores is updated

opal ginkgo
#

hello, I don't know if it helps you, but I gave buttons values to identify which button is, and names to identify which team it belongs to. Then I made this function to addPoints passing value and team as parameters. And passing e.target.value and e.target.name as arguments.

image.png image.png
#

you can refresh results in the same function, I only divided it because I wanted to improve, adding the new game button and I would need to refresh the points again

upbeat plinth
opal ginkgo
solar python
#

@opal ginkgo thanks for sharing the code, but its too advanced for me. : )

gleaming quest
solar python
#

that would be helpful @gleaming quest

gleaming quest
solar python
#

Ik to pass argument (basic stuff) i didn't understand the above code where parse was used and for loop for button

solar python
#

i dont know what im doing, i tried a bunch of things and its not looking good. @gleaming quest

image.png
#

in my head i wanted to have a same fn for same points and when home points button is clicked it should add to the home scores.

upbeat plinth
solar python
upbeat plinth
#

If you want a DRY code, then you should follow @opal ginkgo 's code,
I only wrote what you understand.

solar python
#

Thankyou for helping out but the code seems to be not working, when i click on buttons its remains zero, not sure what currentTarget means here

#

also what do you mean by DRY code? @upbeat plinth

upbeat plinth
upbeat plinth
#

@solar python a closing bracket is missing

solar python
#

yeah i added the closing bracket, still the scores remain zero

#

nvm i found the issue

cerulean crescent
cerulean crescent
solar python
#

that would be helpful

gleaming quest
# solar python yeah i added the closing bracket, still the scores remain zero

Hey, @solar python, sorry for the belated reply. I'm just getting back onto the server now.

It looks like people are suggesting some more advanced ideas/approaches. Look into those if you want to learn about them, but I was going to suggest something that wouldn't require you to do anything you didn't already know about, which would be simply passing in a little string as an argument that would allow the function to know whether it should be adding points to one team or another.

Here's a completely unstyled example. The JavaScript could/should be refactored, but I've tried to write it in a way where the logic is as clear as possible:

https://scrimba.com/scrim/cDmqZNAw

As a student, I think it's good to learn new concepts/skills, but it's also good to take the ones you already have and figure out how to do more with them, so I think either approach would benefit you to try out on your own.

#

You could also pretty easily build on this approach to make the function encompass any number of points you want to add to the score — or in other words, have one function for +1 point, +2 points, etc.: https://scrimba.com/scrim/co5e74b5ca841a858c642fb61

solar python
#

Hey Daniel, no worries buddy.

i wanted to try something new, i have a working code of but it was receptive and wanted to use if-else statement on button . luckily there are wonderful people who helped me out with basic stuffs

gleaming quest
cerulean crescent
# gleaming quest Hey, <@1007426392276869181>, sorry for the belated reply. I'm just getting back ...

This one is using data attributes.
https://scrimba.com/scrim/co3614b79bcbdf6f01044f8ef

I know your not up to this yet but ill explain somethings.

1)data attributes can be added to most html elements, in this case i have added them to your buttons and removed the onclick events.
I have added team and points attributes to each button.

  1. I have used onclick event handlers from javascript ( you will learn this early on scrimba)

  2. loop though the data attributes using querySelectorAll. You don't learn this in the free guides.

  3. now for each button clicked we simply update the points then render the dom.

  4. es6 destructing you won't learn until near the end of the free course. const {team, points} = row.dataset
    simply takes the object keys into there own variables. In this case it's the data attributes for each button element to make it more readable.

Using data attributes you can add as many buttons as you want and the code won't change at all.

Scrimba
Fork of Untitled Scrim

Learn to code with interactive screencasts. Our courses and tutorials will teach you React, Vue, Angular, JavaScript, HTML, CSS, and more. Scrimba is the fun and easy way to learn web development.

#

Object.keys(scoreBoard).includes(team)
Converts the object to an array list of it's keys, so it can be looped over.

includes(team)
is checking the object to make sure the team is in the scoreBoard before updating the score. This also saves if/else logic with one if statement.

gleaming quest
# cerulean crescent This one is using data attributes. https://scrimba.com/scrim/co3614b79bcbdf6f01...

Hey, I'm not sure if this directed at me or at the OP, but I'm almost done with the front end course and am well into learning React, so I'm aware of the more advanced techniques and concepts. But OP is doing an m3 solo project that comes shortly after the students' initial introduction to JavaScript, so I think a lot of these things are too far down the road and require deeper dives to get into.

In general, when I'm trying to show someone another way of doing things, I try to go just one or two steps beyond what they already know. Sometimes I even go no steps beyond that at all and just show them what they can already do with the knowledge and skills they already have. As the Scrimba staff were talking about at the town hall today, students usually can do a lot more than they think they can do already, and you can go a surprisingly long distance with just some basic functions, conditionals, etc. so I think that's an important thing to teach people!

cerulean crescent
cerulean crescent
cerulean crescent
gleaming quest
#

Yeah, it's good stuff. I'm looking forward to the new/updated for React 18 version of the advanced course coming out soon