I have code that adds a pre-determined HTML snippet into a pre-determined <div> element already set out on my page.
The HTML creates specific links to fire a function – these created links fire the correct functions fine.
The button that creates the snippets works fine. The whole two functions are great for what they do.
HOWEVER
The first instance of firing either function will for example fire an alert() if I added one, but make no on screen changes. The next click is perfect.
If I switch from clicking the button, to clicking one of the links created, this again needs to be clicked twice for on-screen changes. Further calls of the function work perfectly.
If I click the button again, needs two clicks first time again.
function taddcolumn(){
if (tracker <= 25){
outel = "o" + tracker;
columnload = '<div><a href="javascript:choosedata(' + tracker + ')">Choose Data</a> <br><a href="javascript:remcol(' + tracker + ')">Remove</a>';
document.getElementById(outel).innerHTML = columnload;
tracker++;
}
else{
alert ('Maximum capacity 25 columns reached.');
}
}
function remcol(colin){
b=colin+1;
for (a = colin; a <= tracker; a++)
{
colwork = "o" + a;
colnxt = "o" + b;
columnload = '<div><a href="javascript:choosedata(' + a + ')">Choose Data</a><br><a href="javascript:remcol(' + a + ')">Remove</a>';
if (colin == 25){
document.getElementById(colwork).innerHTML=="";
}
if (colin <= 24){
document.getElementById(colwork).innerHTML=document.getElementById(colnxt).innerHTML;
}
if (document.getElementById(colwork).innerHTML= '<div><a href="javascript:choosedata(' + b + ')">Choose Data</a><br><a href="javascript:remcol(' + b + ')">Remove</a>'){
document.getElementById(colwork).innerHTML = columnload;
}
b++;
}
lstcol = "o" + tracker;
document.getElementById(lstcol).innerHTML="";
tracker--;
if (tracker == 0){
tracker=1;
}
}
Somehow i had copied and pasted the functions from another part of my .js file instead of cutting/pasting… My bad..