Ok. This function style worked fine with iframes but seems to have a problem in DIV tag. I think it is because the iObj isn’t there untill an Ajax call is made and a DIV tags innerHTML is changed?
If anybody can tell me what the problem is I’ll have my cake and eat it to.
Script
function f1alarm(){
var iObj=document.getElementsByClassName('button');
for(var i=0; i<iObj.length; i++){
iObj[i].onclick=function(){showt(this);};
}
};
showt(button)//IE8 Error:expected ';' here?{
alert('I am Here!');
}
else{
alert('I am not here!');
}
}
addEvent(window,'load',function(){f1alarm()},false);
:mad:
You have a few errors in your code, the main ones are as follows:
- You have unclosed function brackets
- You haven’t declared the reserved word “function” before “showt”
- You have declared an IF ELSE statement but haven’t declared IF anywhere
See the below code which should work fine now.
function f1alarm() {
var bObj = document.getElementsByClassName('button');
for (var i = 0; i < bObj.length; i++) {
bObj[i].onclick = function() {
showt(this);
};
}
}
function showt(button) {
if (true/* do something */) {
alert('I am Here!');
} else {
alert('I am not here!');
}
}
SgtLegend
Thanks for that, it does work perfectly. The staggered function writting acctually does help point out syntax errors. It’s just us dislexics that can’t get our heads around the typeing and it’s reasoning. Thanks again.
No problem, glad to be of assistance 
SgtLegend Yeah the truth is I bush rigged that function so that I could find out why my addtocart which uses the same syntax but is much longer isn’t working. Even after changing the addtocart function the insertrow isn’t being called . It’s long so I’ve cut out most of the 8 cell row.
addtocart function
function addtocart() {
var bObj = document.getElementsByClassName('button');
for (var i = 0; i < bObj.length; i++) {
bObj[i].onclick = function() {
insertItemRow(this);
};
}
}
function insertItemRow(button){
var fs=button.parentNode.parentNode;
var q=fs.getElementsByTagName('select')[2].value;
if(q!='' || q!=0) {
var code = fs.getElementsByTagName('input')[0].value;
var item = fs.getElementsByTagName('input')[1].value;
var color = fs.getElementsByTagName('select')[0].value;
var size = fs.getElementsByTagName('select')[1].value;
var price = fs.getElementsByTagName('input')[2].value;
var quantity = fs.getElementsByTagName('select')[2].value;
var val = [[quantity],[price]];
var multiply = 0;
multiply+= (val[0]*val[1]);
var psrc=fs.parentNode.parentNode.parentNode.getElementsByTagName('input')[2].value;
var subtotal = document.getElementById('subtotal');
var itemrow=cartbody.insertRow(0);
itemrow.setAttribute('title','Item that you have ordered.');
itemrow.setAttribute('id','itemrow[]');
itemrow.setAttribute('name','itemrow[]');
itemrow.className='itemrow';
var addcode=itemrow.insertCell(0);
addcode.className='code';
addcode.setAttribute('colspan','1');
addcode.appendChild(document.createTextNode(code));
//more cells
var addclear=itemrow.insertCell(8);
addclear.setAttribute('colspan','1');
addclear.className='clear';
addclear.setAttribute('align','center');
addclear.innerHTML='<a title="Remove this item" class="removeitem" onclick="deleterow(this);">[x]</a>';
var y=f1.clientHeight;
f1.scrollTop+=y;
EvalSound3();
}//ends if
else{
alert('Please enter a Quantity for this item ');
button.parentNode.parentNode.getElementsByTagName('select')[2].focus();
}
}
addEvent(window,'load',function(){addtocart()},false);
And I hope that it is a syntax error similar to the first function you fixed but there is no error called in IE8 at all and the function doesn’t produce anything.
SgtLegend I was write in the first post, both scripts run with settimeout so that the objects are loaded in the DIV after the Ajax call. A delay of 10 seconds to allow the Ajax call which produces the ‘button’ class iObj actually allows addtocart to run. Without the delay I couldn’t get f1alarm to run either. So I have to call the addtocart after the iObj is loaded to the page. Unfortunatley the Ajax call is made in a seperate index.js file and the addtocart is in checkout.js. So realy I have to call addtocart when with the Ajax call. Can you remind me how you would call a function within a function from one .js to another? Much appreciated. 
SgtLegend I was wrong again:nono:. You can’t call a function from another external.js file from a function in the existing file. You can however exclude the script tag of the other external.js untill you make the Ajax call that changes the div tag innerHTML and append the script tag to that div. It serves two purposes.
- The index.html will be one script tag lighter
- The page source code won’t reveal the name of the second external.js
Minor but sufficient security hack as wizards would look for the external.js file name within the first script file mentioned.
Hence I’ll add this function to the Ajax call function and post back to let you know how I made out.
Append Script Tag SCRIPT
function loadJS(fileName)
{
var s = document.createElement('script');
s.src = fileName; //the name of the JS file.
document.getElementById('scriptDiv').appendChild(s);
}
Live and learn, Just wish I had started 30 years ago:lol:!
SgtLegend Appending the script tag to the Div altered with the Ajax call like I have doesn’t work, I added a function to check if there is a script tag in div f1 and the alert turns up blank? So I’m doing something wrong with the loadjs create element script append element script.
Ajax call Appending Script Tag?
function loadjs(checkout)
{
var s=document.createElement('script');
s.src='../scripts/checkout.js'; //the name of the JS file.
document.getElementById('f1').appendChild;
}
var sidebarli=document.getElementById('sidebar').getElementsByTagName('li');
for(i=0;i<sidebarli.length;i++){
if(sidebarli[i].className=='item' && sidebarli[i].parentNode.className=='prod'){
sidebarli[i].onclick=function(){
alert(this.id+': Is sending your request.');
EvalSound1();
var p=this.id;
getproduct(p);
logo.className=p;
f1.className='product';
loadjs();//not appending to f1 div
hidewelcome();
};//has more but works
//test button
addEvent(placeorder,'click',function( ){
alert(document.getElementById('f1').getElementsByTagName('script')[0].innerHTML);//shows blank??
},false);
Ok. You have to call outerHTML to see the script tag and I didn’t realize that the php file used by the Ajax call already echoed a script tag. lucky/unlucky for me the script doesn’t run with the echoed script tag as it was an old script with a different src though it’s still on the same server and told me that the tag was built into the php file because [0] produced a different file name than the one that I was trying to appen ‘checkout.js’ showed up ‘mockup.js’. When I deleted the php echo script [0] produced an error ‘outerHTML is null or not an object’ which tells me that my loadjs is not appending the script to f1 div with the Ajax call. when I used document getelementsbytagname length on the button click after f1 was changed by the Ajax call the alert read ‘12’ which I confirmed by trying ‘[11]’ that produced ‘mockup.js’ script tag and ‘[12]’ which produced error ‘outerHTML is null or not an object’.
I still have to take the loadjs and test the length property again but this takes me back to what the original question should have been ‘how do you addevents to objects that have yet to be loaded?’ Also what is the use of echoing a script tag when the scriptag doesn’t run any of the other elements echoed? I guess php script has to have some kind of security permission that I don’t know about?
SgtLegend and anbody else interested! The title for this post was wrong from the getgo. There was no fault with the iObj javascript function addtocart(). I proved this by seting a timeout on the function in 'checout.js’that allowed me to run the script 10 seconds after the index.html was loaded. I then changed the innerHTML of div id f1 with Ajax call from ‘index.js’ and the functions in ‘checout.js’ ran. I decided I would call the functions from ‘checout.js’ with the Ajax call from ‘index.js’. This can only be approached by creating a function in ‘index.js’ that creates a script tag and appends the script tag to document body [0]. That function would be added to the function in ‘index.js’ that calls the Ajax call in the same external.js. I proved that the script tag was added to the index.html by changing the onclick of an available button to alert the outerHTML of document getelementsbytagname script [2] which when clicked after the Ajax call was made and the responceText altered the innerHTML of f1 correctly, alerted the new script tags outerHTML as I had created it. The problem is that it doesn’t run the script on the new objects in f1. This I don’t understand. I had removed the echo script tag from the php file that was used by the Ajax call as it to did not work. Would that it would but it doesn’t. Any ideas why? Would be greatfully accepted!:mad:
Ok. apparently there is no other way than to hard code the events into the get.php file like so:
get.php
//should have fetch_as_array statement to hold new html data in memory
echo "<img src='" . $row['src'] . "' class='image' onclick='pictureclick()' title='Click to get a better look'/></div>";
The ‘OnClick’ function is 'Hard Coded/Writen in-line of the HTML requested. As there is no window reload required by the Ajax call the function that makes the Ajax call actually writes the ‘src’ of a script tag with getelementbyid script tag id . This prevents appending or writing 10 or more of the same script tag to the document. If you force window reload the responceText HTML will disapear so the new script will draw errors like ‘object not found/object expected’. The responceText HTML has to be hardcoded to run the new external.js!
Add external.js with Ajax call
document.getElementById('blank').src='scripts/checkout.js';
};
index.html
<script id="blank" src="" type="text/javascript"></script>
Which makes me question why we decided to use ‘Unobtrussive or External.js’ in the first place as it actually adds a third step to comunicating with the server. The answer of course is security as this method doesn’t reveal the script src in the original page source code! Not that a hacker won’t look for it in the script file that is revealed. That becomes his only recourse and is an additional means of security.