Javascript Executes function onload but not firing onclick event for button

Question

Hi there I have just learning the javascript query event handler function and for some reason the javascript executes on load even though i have imported the javascript just before ending the body tag

also for some reason the onclick event is not firing could some one please tell me why! thank you!

var starter=0;
var type;

var addstarter=document.querySelector("#addstarter");
addstarter.addEventListener("click",calculate("addstarter"));

var minusstarter=document.querySelector("#minusstarter");
minusstarter.addEventListener("click",calculate("minusstarter"));

function calculate(type)
{   
  switch(type)
  {
    case'addstarter': starter=starter+1;
    break;

    case 'minusstarter':starter=starter-1;
    break;
    }
    alert(starter);
}

#Starter
{
  float:left;
  width:25%;
  height:40%;
  background-color:rgb(55, 128, 85);
  color: white;
  margin: 5% 1% 1% 4%;
  padding: 1% 1% 1% 1%;
  color: black;
  border-radius: 10% 10% 10% 10%;
}

#Starter img
{
  width:50%;
  margin-top: -5%;
}

<main>
    <div id="Starter">
      
     <div class="card_border">
        <div class="card_heading">
         <p> Starter Pack </p>
        </div>
        <div class="card_content">
        <input type="button" value="+" class=" button button1" id="addstarter"/>
        <a href="https://en.wikipedia.org/wiki/Entr%C3%A9e"><img src="images/starterr.png"></a>
        <input type="button" value="-" class=" button button2" id="minusstarter"/>
        <span class="tooltiptext">$5</span>
        </div>
      </div>  
    </div>

Alon Shmiel · Accepted Answer · 2018-11-10T22:29:41.270

You need to replace:

addstarter.addEventListener("click", calculate("addstarter"));

to:

addstarter.addEventListener("click", () => calculate("addstarter"));

Cause it should be a callback

var starter=0;
var type;

var addstarter=document.querySelector("#addstarter");
addstarter.addEventListener("click", () => calculate("addstarter"));

var minusstarter=document.querySelector("#minusstarter");
minusstarter.addEventListener("click", () => calculate("minusstarter"));

function calculate(type)
{   
  switch(type)
  {
    case'addstarter': starter=starter+1;
    break;

    case 'minusstarter':starter=starter-1;
    break;
    }
    alert(starter);
}

#Starter
{
  float:left;
  width:25%;
  height:40%;
  background-color:rgb(55, 128, 85);
  color: white;
  margin: 5% 1% 1% 4%;
  padding: 1% 1% 1% 1%;
  color: black;
  border-radius: 10% 10% 10% 10%;
}

#Starter img
{
  width:50%;
  margin-top: -5%;
}

<main>
    <div id="Starter">
      
     <div class="card_border">
        <div class="card_heading">
         <p> Starter Pack </p>
        </div>
        <div class="card_content">
        <input type="button" value="+" class=" button button1" id="addstarter"/>
        <a href="https://en.wikipedia.org/wiki/Entr%C3%A9e"><img src="images/starterr.png"></a>
        <input type="button" value="-" class=" button button2" id="minusstarter"/>
        <span class="tooltiptext">$5</span>
        </div>
      </div>  
    </div>

Answers cannot consist of code only. Add an explanantion of what you did and why. — connexo, Nov 10 '18 at 22:28

Javascript Executes function onload but not firing onclick event for button

1 Answers1