Some JS help :)


#1

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Coffee Dose</title>
    <link rel="stylesheet" href="master.css" text="tex/css">
  </head>
  <body>

    <div class="content">

    <button id="personOne">One person</button>
    <button id="personTwo">Two person</button>    
    <button id="personThree">Three person</button>
    <button id="personFour">Four person</button> 
     
      <p class="para"> </p>

    </div>

  </body>
  <script src="main.js"></script>

</html>

And here is th JS

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');
  }
}

Greeting Viktor


#2

First move your script tag before closing body tag and tell us if there are any errors.


#3

Yey no Error:slight_smile:
So should I always put the script tag before the closing body tag?


#4

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 :).

So here is the HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Coffee Dose</title>
    <link rel="stylesheet" href="master.css" text="tex/css">
  </head>
  <body>

    <p id="name">V60</p>

  <div class="content">

   <button id="personOne">One person</button>
   <button id="personTwo">Two person</button>
   <button id="personThree">Three person</button>
   <button id="personFour">Four person</button>

     <p id="para"> </p>
  </div>

    <script src="main.js"></script>
  </body>
</html>

And here is the JS

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'
  }

};

Greetings Viktor