Scorecounter using Javascript

Question

I'm really new to Javascript and I want to make a scorecounter function for a simple project of mine. I used 2 functions with the same purpose to achieve this but I want to use the same functions for the 2 teams. I'll put the code in here.

var scr1 = document.getElementById('button1');
var scr2 = document.getElementById('button2');
var i = 1;

function buttonClick() {
  document.getElementById('inc', 'inc2').value = i++;
}

<div id="scorebox1">
  <button id="button1" onclick="buttonClick()">+1 Team 1 </button>
  <input type="text" id="inc" value="0"> </input>
</div>


<div id="scorebox2">
  <button id="button2" onclick="buttonClick()">+1 Team 2</button>
  <input type="text" id="inc2" value="0"></input>
</div>

I'm completely new to functions and parameters and I've searched the terms on google for a long time now but don't really know how to advance. Help would be greatly appreciated.

Cheers and thanks, J.

Nope · Accepted Answer · 2017-02-16 14:33:35Z

4

Using your existing code, you could pass the identifier of the target into the function from the button

onclick="buttonClick('inc')

and increase the targets value directly

document.getElementById(target).value++;

I removed the redundant code in the below example to show only the relevant code.

function buttonClick(target) {
  document.getElementById(target).value++;
}

<div id="scorebox1">
  <button id="button1" onclick="buttonClick('inc')">+1 Team 1 </button>
  <input type="text" id="inc" value="0"> </input>
</div>


<div id="scorebox2">
  <button id="button2" onclick="buttonClick('inc2')">+1 Team 2</button>
  <input type="text" id="inc2" value="0"></input>
</div>

edited Feb 16, 2017 at 14:33

answered Feb 16, 2017 at 14:29

Nope

22.4k8 gold badges50 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mplungjan · Accepted Answer · 2017-02-16 14:35:13Z

3

You can do it like this, passing the html element to the function. If your html is different, you might need something else than nextElementSibling.

function buttonClick(element) {
  element.nextElementSibling.value++;
}

<div id="scorebox1">
  <button id="button1" onclick="buttonClick(this)">+1 Team 1 </button>
  <input type="text" id="inc" value="0"> </input>
</div>


<div id="scorebox2">
  <button id="button2" onclick="buttonClick(this)">+1 Team 2</button>
  <input type="text" id="inc2" value="0"></input>
</div>

edited Feb 16, 2017 at 14:35

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Feb 16, 2017 at 14:33

Kaddath

6,1511 gold badge11 silver badges24 bronze badges

1 Comment

user7393973 Over a year ago

Well thought using the nextElementSibling property.

Fredrik · Accepted Answer · 2017-02-16 14:32:20Z

1

What you want is a way for the function to distinguish which team that should get the increased points. We can do this by sending different parameters to the function depending on which button that is clicked.

function buttonClick(team) {
    if (team == 'team1') {
        var input = document.getElementById('inc');
        input.value++;
    }
    if (team == 'team2') {
        var input = document.getElementById('inc2');
        input.value++;
    }
}

<div id = "scorebox1">
  <button id="button1" onclick="buttonClick('team1')">+1 Team 1 </button>
  <input type="text" id="inc" value= "0"> </input>
</div>


<div id="scorebox2">
  <button id="button2" onclick="buttonClick('team2')">+1 Team 2</button>
  <input type="text" id="inc2" value="0"></input>
</div>

answered Feb 16, 2017 at 14:32

Fredrik

5,0971 gold badge24 silver badges33 bronze badges

2 Comments

user7393973 Over a year ago

That works but I think the other answers approaches are a little more efficient.

Fredrik Over a year ago

Yup, the other answer beat me to it! I'd say this is a bit more pedagogical and simple logic-wise though, and that's what I figured OP needed so I'm keeping this answer up as well!

Collectives™ on Stack Overflow

Scorecounter using Javascript

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related