Leading score - basketball scores, with js need help

JavaScript
1

Hello everyone!!,
I’m making a small score board with two teams. Both gets inputs for their scores, Once they get their scores, they subtract both scores leaving a leading score of the team with high score. Its a basketball game, not able to display the winner score for some reason i get a weir result, i get the lower score instead of the hight score to display in the user interface. Hope you can help.
example:
team 1: 56 points as an input
team 2: 23 points as an input

Then we subtract and display the hight score with the remaining subtraction
result: 33 points leading team 1
here is my code link
https://codepen.io/ivanmt07/pen/axxaxK

3

Hi @camperextraordinaire no its not working when i type 12 first input and then 4 second input wont work!, i have still trying to figured out.

00%20PM

it should be warriors has the leading score of 8 points

4

hope this would help you

 var leadScoreW = Math.abs(totalWar - totalHor);
  var leadScoreH = Math.abs(totalHor - totalWar);

  if( totalWar < totalHor){
    document.getElementById('leading-points').textContent = warriors + ' has a leading score of ' + leadScoreW + ' points';
  }else {
      document.getElementById('leading-points').textContent = hornets + ' has a leading score of ' + leadScoreH + ' points';
  }

Capture
Capture1

1 Like
5

Sorry about that. Yes, I see the issue now.

In your event listener (below), you call leadinScore function.

document.getElementById('total').addEventListener('click', leadingScore);

The first argument passed an event handler function is the event object. So, inside leadingScore, the parameter pointWar will be the event object and pointHor will be undefined. You need to get the applicable input values when the Total button is clicked. One suggestion is to use warriorsPoints and hornetsPoints functions to do that, but not by passing a value to them. Below is how I would write warriorPoints.

// warrior function
function warriorsPoints(){
  // get the element value from the input text
  var setinputwarriors = document.getElementById('pointswar').value;
  //set the input value to the DOM UI
  document.getElementById('war-points').textContent = setinputwarriors;
  return setinputwarriors;
};

I will let you correct the hornetsPoints function.

Also, your leadingScore function does not need any parameters as you will not be using anything passed to it.

Next you have another issue in your if, else if, and else statements. You have to remember that input values are strings, so if Warriors input value is 12, then it really is “12”. This means your if statement is comparing “12” > “4” which is false. The easiest way to fix that is to use parseInt or Number function to convert the points within the warriorPoints and hornetsPoints functions.

Lastly, I notice you have an else statement, but if the else statement is executed, that would be there was a tie, so I am not sure why you would say “Hornets has a leading score of 0 points”. Instead, I would say there was a tie game, but that is just my opinion.

1 Like
6

Thank you so much Hrr, that was also a solution i was missing and it works perfectly. thank you so much, for the feedback and reply help me a lot to understand my missing point. thanks. Great job…

1 Like
7

Hi @camperextraordinaire
thank you so much for the feedback it means a lot to me, to know my mistakes and missing things, i will surely work on the assigment that i miss and work on other way around to make the work happend. thank you so much really constructive feedback. I will get back to a reply and work on it :slight_smile: man thanks!!!..

8

You are welcome dear imendieta
I is really pleasure for me that could help you!
now give the leading score to me :smile:

9

Hello @Hrr i was looking at your code again and i notice that on your if else statement you have this:

if( totalWar <  totalHor){
    document.getElementById('leading-points').textContent = warriors + ' has a leading score of ' + leadScoreW + ' points';
  }else {
      document.getElementById('leading-points').textContent = hornets + ' has a leading score of ' + leadScoreH + ' points';
  }

meaning that you have totalWar < totalHor as totalWar as lesswould it be better to read if we have
totalWar > totalHor more than. and have our functions returning value to Number(setinputwarriors); so that way will read numbers and not strings.

i will have this at the end adding your code plus adding the additional Number to the returning functions.
this will be the final code. that suggestion was from @camperextraordinaire and i happend to added in our code here.

// warrior function
function warriorsPoints(setinputwarriors){
  // get the element value from the input text
  setinputwarriors = document.getElementById('pointswar').value;
  //set the input value to the DOM UI
  document.getElementById('war-points').textContent = setinputwarriors;
  return Number(setinputwarriors);

};

// hornets function
function hornetsPoints(setinputhornets){
  // get the element value from the input text
  setinputhornets = document.getElementById('pointshor').value;
  //set the input value to the DOM UI
  document.getElementById('hor-points').textContent = setinputhornets;
  return Number(setinputhornets);

};


//pending... try to conver the input value into number to do validation.

// function leadingScores
function leadingScore(pointWar, pointHor){
  //
  var warriors = "Warriors!";
  var hornets = 'Hornets!';
  // call the functions warriors and hornets with their corresponding points.
  var totalWar = warriorsPoints(pointWar); // 12
  var totalHor = hornetsPoints(pointHor); // 4

  //var leadScore = Math.abs(totalWar - totalHor);
  var leadScoreW = Math.abs(totalWar - totalHor);
  var leadScoreH = Math.abs(totalHor - totalWar);


  if( totalWar > totalHor){
    document.getElementById('leading-points').textContent = warriors + ' has a leading score of ' + leadScoreW + ' points';
  }else {
      document.getElementById('leading-points').textContent = hornets + ' has a leading score of ' + leadScoreH + ' points';
  }

};
document.getElementById('total').addEventListener('click', leadingScore);

But overall all looks good... thanks @Hrr
10

you can do this way totalWar > totalHor but you have to do something else too(

if( totalWar > totalHor){
    document.getElementById('leading-points').textContent = hornets + ' has a leading score of ' + leadScore + ' points';
  }else{
    document.getElementById('leading-points').textContent = warriors + ' has a leading score of ' + leadScore + ' points';
  }

)
this is because in both ways your function subtracts the second argument (pointHor) from the first argument (pointWar)
see here (
`var totalWar = warriorsPoints(pointWar);
var totalHor = hornetsPoints(pointHor);

var leadScore = Math.abs(totalWar - totalHor);`
)

1 Like
11

Hello there @Hrr yes its true, to also do it both ways, i will stay with the first options, although i must said i its a better option tho, i do understand it better. thanks so much.for your help.
and yes i can give you the leading score to you. :slight_smile:

Thanks for the help!!!.

1 Like
12

thanks for gifting the leading points
and you are welcome
we are here one FCC family

13

Hello @camperextraordinaire

Thank you so much for your feedback… its much appreciated and welcome, i have learn a lot as i work on the assignment that you told me to do, and i have learn from my mistakes and learn lots of things new to it. I have done, what you asked me so here is the option you wanted me to do… thank you so much.

As for for the if else statement i make a mistake typing i believe. Like you said its a tie game when both teams have equal points, so i have fixed that as well.

I have created the two additional functions you asked me to do, also the Number() to compare two input numbers as a string, also be looking at your other solution as well. :slight_smile: thank you so much. Here is my code done!.

//warriors points function
function warriorsPoints(){
  //get the element value input
  var setinputwarriors = document.getElementById('pointswar').value;
  //set the input value to the DOM UI
  document.getElementById('war-points').textContent = setinputwarriors;
  return Number(setinputwarriors);

};
//hornets points function
function hornetsPoints(){
  //get the element value input
  var setinputhornets = document.getElementById('pointshor').value;
  //set the input value to the DOM UI
  document.getElementById('hor-points').textContent = setinputhornets;
  return Number(setinputhornets);

};

// leading scores
function leadingScore(){
  //labels
  var warriors = "Warriors!";
  var hornets = 'Hornets!';

  // call the functions warriors and hornets with their corresponding points.
  var totalWar = warriorsPoints(); // 12
  var totalHor = hornetsPoints(); // 4

  //var leadScore = Math.abs(totalWar - totalHor);
  var leadScore = Math.abs(totalWar - totalHor);

  if( totalWar > totalHor){
    document.getElementById('leading-points').textContent = warriors + ' has a leading score of ' + leadScore + ' points';
  }else if( totalWar < totalHor ) {
      document.getElementById('leading-points').textContent = hornets + ' has a leading score of ' + leadScore + ' points';
  }else{
    document.getElementById('leading-points').textContent = warriors + ' and the  ' + hornets + ' are tie';
  }

};
document.getElementById('total').addEventListener('click', leadingScore);
14

Hi @Hrr

I have learn lots from your code as well… new techniques thanks @Hrr . yes like you said we all Family here and we share and help each other here. thanks for having friends like you. Many thanks. :slight_smile:

1 Like