Fos some reason I always get an error on .addEventListener. It says [Error] TypeError: null is not an object (evaluating ‘btnOne.addEventListener’). Can someone please help me and explain why this is happening.
I added the HTML and JS, there is no CSS as of jet.
Here is the HTML
var btnOne = document.getElementById('personOne');
var btnTwo = document.getElementById('persontwo');
var btnThree = document.getElementById('personThree');
var btnFour = document.getElementById('personFour');
var para = document.getElementById('para');
var buttons = ['btnOne', 'btnTwo', 'btnThree', 'btnFour'];
for (var i = 0; i < buttons.length; i++) {
var choice = buttons[i];
}
btnOne.addEventListener("click", amount);
function amount() {
if (choice === 'btnOne') {
alert('hi');
}
}
So another problem and this time it is more of a ‘how do I make js and HTML talk together thing’
I’m trying to make the correct ratio of coffee vs water print out when you press the corresponding button. So for instance, if you press Three people you get the correct coffee vs water amount. As the program is now it only shows the first one :(. Any ideas :).
var btnOne = document.getElementById('personOne');
var btnTwo = document.getElementById('personTwo');
var btnThree = document.getElementById('personThree');
var btnFour = document.getElementById('personFour');
var para = document.getElementById('para');
btnOne.addEventListener("click", amount);
btnTwo.addEventListener("click", amount);
btnThree.addEventListener("click", amount);
btnFour.addEventListener("click", amount);
function amount() {
var kaff = 60;
var vatn = 1000;
if ('btnOne') {
para.textContent = 'You need ' + kaff/4 + ' gr of coffee and ' + vatn/4 + ' gr of water.'
} else if ('btnTwo') {
para.textContent = 'You need ' + kaff/3 + ' gr of coffee and ' + vatn/3 + ' gr of water'
} else if (btnThree) {
para.textContent = 'You need ' + kaff/2 + ' gr of coffee and ' + Math.floor(vatn/2) + ' gr of water'
} else {
para.textContent = 'You need ' + kaff + ' gr of coffee and ' + vatn + ' gr of water'
}
};