Javascript Executes function onload but not firing onclick event for button [duplicate]
up vote
-1
down vote
favorite
This question already has an answer here:
addEventListener calls the function without me even asking it to
3 answers
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>
javascript jquery html css ajax
marked as duplicate by CertainPerformance
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 10 at 22:42
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
up vote
-1
down vote
favorite
This question already has an answer here:
addEventListener calls the function without me even asking it to
3 answers
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>
javascript jquery html css ajax
marked as duplicate by CertainPerformance
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 10 at 22:42
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
This question already has an answer here:
addEventListener calls the function without me even asking it to
3 answers
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>
javascript jquery html css ajax
This question already has an answer here:
addEventListener calls the function without me even asking it to
3 answers
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>
This question already has an answer here:
addEventListener calls the function without me even asking it to
3 answers
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>
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>
javascript jquery html css ajax
javascript jquery html css ajax
edited Nov 10 at 22:26
connexo
19.7k73353
19.7k73353
asked Nov 10 at 22:26
Mohamed faizal
33
33
marked as duplicate by CertainPerformance
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 10 at 22:42
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by CertainPerformance
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 10 at 22:42
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
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 at 22:28
I know it, I edited my answer, please upvote..
– Alon Shmiel
Nov 10 at 22:30
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
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 at 22:28
I know it, I edited my answer, please upvote..
– Alon Shmiel
Nov 10 at 22:30
add a comment |
up vote
1
down vote
accepted
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 at 22:28
I know it, I edited my answer, please upvote..
– Alon Shmiel
Nov 10 at 22:30
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
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>
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>
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>
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>
edited Nov 10 at 22:29
answered Nov 10 at 22:27
Alon Shmiel
1,0781565113
1,0781565113
Answers cannot consist of code only. Add an explanantion of what you did and why.
– connexo
Nov 10 at 22:28
I know it, I edited my answer, please upvote..
– Alon Shmiel
Nov 10 at 22:30
add a comment |
Answers cannot consist of code only. Add an explanantion of what you did and why.
– connexo
Nov 10 at 22:28
I know it, I edited my answer, please upvote..
– Alon Shmiel
Nov 10 at 22:30
Answers cannot consist of code only. Add an explanantion of what you did and why.
– connexo
Nov 10 at 22:28
Answers cannot consist of code only. Add an explanantion of what you did and why.
– connexo
Nov 10 at 22:28
I know it, I edited my answer, please upvote..
– Alon Shmiel
Nov 10 at 22:30
I know it, I edited my answer, please upvote..
– Alon Shmiel
Nov 10 at 22:30
add a comment |