onclick event ocurring without click event actually happening

onclick event ocurring without click event actually happening - js

up vote
1
down vote

favorite

Folks
I'm a complete novice so apologise upfront for what is going to be a very basic question, I'm sure.

I have a javascript file that is linked to a html file which contains a number of buttons. The onclick event for one such button seems to be completely bypassing the onlick event and triggering as soon as the page opens. Any ideas? Sorry to ask what is likely something really basic, but I have lost count of the hours I have spent trying to get it to work only on the "click" event....

in java:

var arrEnrolments=;//global array
function init() 
 populateEnrolments();
 var enrolArray=arrEnrolments

 document.getElementById("resetEnrol").onclick=resetEnrolments;
 document.getElementById("listEnrol").onclick=listAllEnrols;
 document.getElementById("sortEnrol").onclick=sortByName(arrEnrolments); 


function populateEnrolments()
arrEnrolments=;
var stuOne=id:1234567, name: "Jones, Brigit", mark: null, grade: "";
var stuTwo=id:1234566, name: "Somers, Tom ", mark: null, grade: "";
var stuThree=id:1222445, name: "Lee, Vera", mark: null, grade: "";
var stuFour=id:1220123, name: "Crawford, Anne", mark: null, grade: "";
var stuFive=id:1244444, name: "Wu, Russel", mark: null, grade: "";
var stuSix=id:1238899, name: "Shaw, Boris", mark: null, grade: "";
var stuSeven=id:1237799, name: "Wilson, Terri", mark: null, grade: "";
arrEnrolments=[stuOne, stuTwo, stuThree, stuFour, stuFive, stuSix, stuSeven]; 


function sortByName(searchArray) 

var pos=0;
var count, temp;

do
 var msgOut="Student records sorted into Name ascending sequence";
 count=0;
 for(var pos=0; pos<searchArray.length-1; pos++)
 if(searchArray[pos].name>searchArray[pos+1].name)
 temp=searchArray[pos];
 searchArray[pos]=searchArray[pos+1];
 searchArray[pos+1]=temp;
 count++
 //end if
 //end for
 while (count>0)//end do

addToOutput(msgOut);


function addToOutput(output)
var msgOut=output;
document.getElementById("output").innerHTML=msgOut;



window.onload = init;

In html:

<body>
<header>
<h1>Tracking Student Enrolments and Completions<h1>
</header>
<article class="flex-container">
<section class="flex-item"> 
<h2>Enrolments</h2>
<button type="button" id="resetEnrol">Reset Enrolment List</button>
<button type="button" id="listEnrol">List All Enrolments</button>
<button type="button" id="sortEnrol">Sort Enrolments by Name</button><br/>
</article>
</body>

asked 2 days ago

Coops

New contributor

add a comment |

up vote
1
down vote

favorite

Folks
I'm a complete novice so apologise upfront for what is going to be a very basic question, I'm sure.

in java:

var arrEnrolments=;//global array
function init() 
 populateEnrolments();
 var enrolArray=arrEnrolments

 document.getElementById("resetEnrol").onclick=resetEnrolments;
 document.getElementById("listEnrol").onclick=listAllEnrols;
 document.getElementById("sortEnrol").onclick=sortByName(arrEnrolments); 


function populateEnrolments()
arrEnrolments=;
var stuOne=id:1234567, name: "Jones, Brigit", mark: null, grade: "";
var stuTwo=id:1234566, name: "Somers, Tom ", mark: null, grade: "";
var stuThree=id:1222445, name: "Lee, Vera", mark: null, grade: "";
var stuFour=id:1220123, name: "Crawford, Anne", mark: null, grade: "";
var stuFive=id:1244444, name: "Wu, Russel", mark: null, grade: "";
var stuSix=id:1238899, name: "Shaw, Boris", mark: null, grade: "";
var stuSeven=id:1237799, name: "Wilson, Terri", mark: null, grade: "";
arrEnrolments=[stuOne, stuTwo, stuThree, stuFour, stuFive, stuSix, stuSeven]; 


function sortByName(searchArray) 

var pos=0;
var count, temp;

do
 var msgOut="Student records sorted into Name ascending sequence";
 count=0;
 for(var pos=0; pos<searchArray.length-1; pos++)
 if(searchArray[pos].name>searchArray[pos+1].name)
 temp=searchArray[pos];
 searchArray[pos]=searchArray[pos+1];
 searchArray[pos+1]=temp;
 count++
 //end if
 //end for
 while (count>0)//end do

addToOutput(msgOut);


function addToOutput(output)
var msgOut=output;
document.getElementById("output").innerHTML=msgOut;



window.onload = init;

In html:

<body>
<header>
<h1>Tracking Student Enrolments and Completions<h1>
</header>
<article class="flex-container">
<section class="flex-item"> 
<h2>Enrolments</h2>
<button type="button" id="resetEnrol">Reset Enrolment List</button>
<button type="button" id="listEnrol">List All Enrolments</button>
<button type="button" id="sortEnrol">Sort Enrolments by Name</button><br/>
</article>
</body>

asked 2 days ago

Coops

New contributor

add a comment |

up vote
1
down vote

favorite

Folks
I'm a complete novice so apologise upfront for what is going to be a very basic question, I'm sure.

in java:

var arrEnrolments=;//global array
function init() 
 populateEnrolments();
 var enrolArray=arrEnrolments

 document.getElementById("resetEnrol").onclick=resetEnrolments;
 document.getElementById("listEnrol").onclick=listAllEnrols;
 document.getElementById("sortEnrol").onclick=sortByName(arrEnrolments); 


function populateEnrolments()
arrEnrolments=;
var stuOne=id:1234567, name: "Jones, Brigit", mark: null, grade: "";
var stuTwo=id:1234566, name: "Somers, Tom ", mark: null, grade: "";
var stuThree=id:1222445, name: "Lee, Vera", mark: null, grade: "";
var stuFour=id:1220123, name: "Crawford, Anne", mark: null, grade: "";
var stuFive=id:1244444, name: "Wu, Russel", mark: null, grade: "";
var stuSix=id:1238899, name: "Shaw, Boris", mark: null, grade: "";
var stuSeven=id:1237799, name: "Wilson, Terri", mark: null, grade: "";
arrEnrolments=[stuOne, stuTwo, stuThree, stuFour, stuFive, stuSix, stuSeven]; 


function sortByName(searchArray) 

var pos=0;
var count, temp;

do
 var msgOut="Student records sorted into Name ascending sequence";
 count=0;
 for(var pos=0; pos<searchArray.length-1; pos++)
 if(searchArray[pos].name>searchArray[pos+1].name)
 temp=searchArray[pos];
 searchArray[pos]=searchArray[pos+1];
 searchArray[pos+1]=temp;
 count++
 //end if
 //end for
 while (count>0)//end do

addToOutput(msgOut);


function addToOutput(output)
var msgOut=output;
document.getElementById("output").innerHTML=msgOut;



window.onload = init;

In html:

<body>
<header>
<h1>Tracking Student Enrolments and Completions<h1>
</header>
<article class="flex-container">
<section class="flex-item"> 
<h2>Enrolments</h2>
<button type="button" id="resetEnrol">Reset Enrolment List</button>
<button type="button" id="listEnrol">List All Enrolments</button>
<button type="button" id="sortEnrol">Sort Enrolments by Name</button><br/>
</article>
</body>

asked 2 days ago

Coops

New contributor

Folks
I'm a complete novice so apologise upfront for what is going to be a very basic question, I'm sure.

in java:

var arrEnrolments=;//global array
function init() 
 populateEnrolments();
 var enrolArray=arrEnrolments

 document.getElementById("resetEnrol").onclick=resetEnrolments;
 document.getElementById("listEnrol").onclick=listAllEnrols;
 document.getElementById("sortEnrol").onclick=sortByName(arrEnrolments); 


function populateEnrolments()
arrEnrolments=;
var stuOne=id:1234567, name: "Jones, Brigit", mark: null, grade: "";
var stuTwo=id:1234566, name: "Somers, Tom ", mark: null, grade: "";
var stuThree=id:1222445, name: "Lee, Vera", mark: null, grade: "";
var stuFour=id:1220123, name: "Crawford, Anne", mark: null, grade: "";
var stuFive=id:1244444, name: "Wu, Russel", mark: null, grade: "";
var stuSix=id:1238899, name: "Shaw, Boris", mark: null, grade: "";
var stuSeven=id:1237799, name: "Wilson, Terri", mark: null, grade: "";
arrEnrolments=[stuOne, stuTwo, stuThree, stuFour, stuFive, stuSix, stuSeven]; 


function sortByName(searchArray) 

var pos=0;
var count, temp;

do
 var msgOut="Student records sorted into Name ascending sequence";
 count=0;
 for(var pos=0; pos<searchArray.length-1; pos++)
 if(searchArray[pos].name>searchArray[pos+1].name)
 temp=searchArray[pos];
 searchArray[pos]=searchArray[pos+1];
 searchArray[pos+1]=temp;
 count++
 //end if
 //end for
 while (count>0)//end do

addToOutput(msgOut);


function addToOutput(output)
var msgOut=output;
document.getElementById("output").innerHTML=msgOut;



window.onload = init;

In html:

<body>
<header>
<h1>Tracking Student Enrolments and Completions<h1>
</header>
<article class="flex-container">
<section class="flex-item"> 
<h2>Enrolments</h2>
<button type="button" id="resetEnrol">Reset Enrolment List</button>
<button type="button" id="listEnrol">List All Enrolments</button>
<button type="button" id="sortEnrol">Sort Enrolments by Name</button><br/>
</article>
</body>

javascript html onclick getelementbyid

asked 2 days ago

Coops

New contributor

asked 2 days ago

Coops

New contributor

asked 2 days ago

Coops

New contributor

asked 2 days ago

Coops

asked 2 days ago

Coops

New contributor

Coops is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment |

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

The solution:

document.getElementById('sortEnrol').onclick = sortByName(arrEnrolments);

is not registering an eventListener but instead executing the sortByName function.
You need a closure here as follows:

document.getElementById('sortEnrol').onclick = function () sortByName(arrEnrolments); ;

A few comments:

enrolArray variable is created in the init function but never used

pos variable is defined twice in the sortByName function

answered 2 days ago

c7x43t

512

New contributor

Thank you soooo much! Really appreciate your help!
– Coops
2 days ago

And thanks for the feedback on enrolArray (I created it trying to bypass the issue I was having with onclick and forgot to delete) and also fixed up the pos.
– Coops
2 days ago

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

Coops is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53238367%2fonclick-event-ocurring-without-click-event-actually-happening-js%23new-answer', 'question_page');

);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

The solution:

document.getElementById('sortEnrol').onclick = sortByName(arrEnrolments);

is not registering an eventListener but instead executing the sortByName function.
You need a closure here as follows:

document.getElementById('sortEnrol').onclick = function () sortByName(arrEnrolments); ;

A few comments:

enrolArray variable is created in the init function but never used

pos variable is defined twice in the sortByName function

answered 2 days ago

c7x43t

512

New contributor

Thank you soooo much! Really appreciate your help!
– Coops
2 days ago

And thanks for the feedback on enrolArray (I created it trying to bypass the issue I was having with onclick and forgot to delete) and also fixed up the pos.
– Coops
2 days ago

add a comment |

up vote
1
down vote

accepted

The solution:

document.getElementById('sortEnrol').onclick = sortByName(arrEnrolments);

is not registering an eventListener but instead executing the sortByName function.
You need a closure here as follows:

document.getElementById('sortEnrol').onclick = function () sortByName(arrEnrolments); ;

A few comments:

enrolArray variable is created in the init function but never used

pos variable is defined twice in the sortByName function

answered 2 days ago

c7x43t

512

New contributor

Thank you soooo much! Really appreciate your help!
– Coops
2 days ago

And thanks for the feedback on enrolArray (I created it trying to bypass the issue I was having with onclick and forgot to delete) and also fixed up the pos.
– Coops
2 days ago

add a comment |

up vote
1
down vote

accepted

The solution:

document.getElementById('sortEnrol').onclick = sortByName(arrEnrolments);

is not registering an eventListener but instead executing the sortByName function.
You need a closure here as follows:

document.getElementById('sortEnrol').onclick = function () sortByName(arrEnrolments); ;

A few comments:

enrolArray variable is created in the init function but never used

pos variable is defined twice in the sortByName function

answered 2 days ago

c7x43t

512

New contributor

The solution:

document.getElementById('sortEnrol').onclick = sortByName(arrEnrolments);

is not registering an eventListener but instead executing the sortByName function.
You need a closure here as follows:

document.getElementById('sortEnrol').onclick = function () sortByName(arrEnrolments); ;

A few comments:

enrolArray variable is created in the init function but never used

pos variable is defined twice in the sortByName function

answered 2 days ago

c7x43t

512

New contributor

answered 2 days ago

c7x43t

512

New contributor

answered 2 days ago

c7x43t

512

answered 2 days ago

c7x43t

512

New contributor

c7x43t is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

Thank you soooo much! Really appreciate your help!
– Coops
2 days ago

And thanks for the feedback on enrolArray (I created it trying to bypass the issue I was having with onclick and forgot to delete) and also fixed up the pos.
– Coops
2 days ago

add a comment |

Thank you soooo much! Really appreciate your help!
– Coops
2 days ago

And thanks for the feedback on enrolArray (I created it trying to bypass the issue I was having with onclick and forgot to delete) and also fixed up the pos.
– Coops
2 days ago

Thank you soooo much! Really appreciate your help!
– Coops
2 days ago

And thanks for the feedback on enrolArray (I created it trying to bypass the issue I was having with onclick and forgot to delete) and also fixed up the pos.
– Coops
2 days ago

add a comment |

Coops is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Coops is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Post as a guest

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Myujth