I’ve been learning JavaScript for a college assignment and I can’t figure out why my point counters don’t work.
<HTML>
<HEAD>
<TITLE>Team points counter</TITLE>
<script>
<!-- Variable assignments brick -->
var T1, T2, T3, T4, T5;
T1 = 0;
T2 = 0;
T3 = 0;
T4 = 0;
T5 = 0;
<!-- Function brick -->
function Add(Tx, TxAns) {
return function() {
Tx += 1;
document.getElementById("TxAns").innerHTML = Tx;
}
}
function Sub(Tx,TxAns) {
return function() {
Tx += 1;
document.getElementById("TxAns").innerHTML = Tx;
}
}
</script>
</HEAD>
<BODY>
<h1 id="Subtitle">Team points counter</h1>
<!-- Button brick -->
<p id = "T1p"> Team 1  
<button id=Team1A type="button" onclick="Add(T1,T1Ans);"> +1 </button>
<button id=Team1S type="button" onclick="Sub(T1,T1Ans);"> -1 </button> </p>
<p> <output id="T1Ans"> </output> </p>
<p id = "T2p"> Team 2  
<button id=Team2A type="button" onclick="Add(T2,T2Ans);"> +1 </button>
<button id=Team2S type="button" onclick="Sub(T2,T2Ans);"> -1 </button> </p>
<p> <output id="T2Ans"> </output> </p>
<p id = "T3p"> Team 3  
<button id=Team3A type="button" onclick="Add(T3,T3Ans);"> +1 </button>
<button id=Team3S type="button" onclick="Sub(T3,T3Ans);"> -1 </button> </p>
<p> <output id="T3Ans"> </output> </p>
<p id = "T4p"> Team 4  
<button id=Team4A type="button" onclick="Add(T4,T4Ans);"> +1 </button>
<button id=Team4S type="button" onclick="Sub(T4,T5Ans);"> -1 </button> </p>
<p> <output id="T4Ans"> </output> </p>
<p id = "T5p"> Team 5  
<button id=Team5A type="button" onclick="Add(T5,T5Ans);"> +1 </button>
<button id=Team5S type="button" onclick="Sub(T5,T5Ans);"> -1 </button> </p>
<p> <output id="T5Ans"> </output> </p>
</BODY>
<script>
<!-- CSS brick -->
document.body.style.backgroundColor = "grey";
document.getElementById("Subtitle").style.color = "Black";
document.getElementById("T1p").style.color = "red";
document.getElementById("T2p").style.color = "orange";
document.getElementById("T3p").style.color = "yellow";
document.getElementById("T4p").style.color = "green";
document.getElementById("T5p").style.color = "blue";
</script>
</HTML>
I tried making a different program to figure out why at it seems that when I try to make the function availible for several variables, it stops working.
<HTML>
<SCRIPT>
T1 = 0;
function Add(Tx){
Tx += 1;
document.getElementById("Tx").innerHTML = Tx;
}
</SCRIPT>
<BUTTON type="button" onclick="Add(T1);"> +1 </BUTTON>
<OUTPUT id=Tx> </OUTPUT>
</HTML>
Now this only allows itself to be added to once.
Any and all help would be appreciated
Advertisement
Answer
Below is an example of using an Object to keep track of the totals.
I’ve also modified you code to be a bit more DRY. Instead of creating lots of HTML for each one, I place the HTML inside a hidden DIV to act like a template, and then use Javascript to create the real ones. From here I can then easily attach the event to the buttons.
const answers = {
T1: 0, T2: 0, T3: 0, T4: 0, T5: 0
};
const mount = document.querySelector('#mount');
const template = document.querySelector("#team_template");
function TeamInput(o) {
const f = document.createElement('div');
f.innerHTML = template.innerHTML;
const p = f.querySelector('p');
p.style.color = o.color;
const output = f.querySelector('output');
const buttons = p.querySelectorAll('button');
f.querySelector('span').innerText = o.name;
//add button
buttons[0].addEventListener('click', () => {
answers[o.T] += 1;
console.log(answers);
output.innerText = answers[o.T];
});
//substract
buttons[1].addEventListener('click', () => {
answers[o.T] -= 1;
output.innerText = answers[o.T];
});
//add to DOM
mount.appendChild(f);
}
document.body.style.backgroundColor = "grey";
document.getElementById("Subtitle").style.color = "Black";
TeamInput({name: 'Team 1', color: 'red', T: 'T1'});
TeamInput({name: 'Team 2', color: 'orange', T: 'T2'});
TeamInput({name: 'Team 3', color: 'yellow', T: 'T3'});
TeamInput({name: 'Team 4', color: 'green',T: 'T4'});
TeamInput({name: 'Team 5', color: 'blue',T: 'T5'});<h1 id="Subtitle">Team points counter</h1>
<div id="mount"></div>
<div id="team_template" style="display:none">
<p><span>Name</span> 
<button type="button"> +1 </button>
<button type="button"> -1 </button>
</p>
<p>
<output>0</output>
</p>
</div>