Question

I don’t know if this question might be disliked :s

I am quite new to javascript and wonder if you experts can see any obvious mistakes (bad javascript coding) below? Or if there are any good improvements?

The code is working…

// add iframes to page
var normal_sortables = document.getElementById('normal-sortables');
normal_sortables.innerHTML = normal_sortables.innerHTML + '<div class="postbox"><iframe style="width:100%;height:300px;" id="iframe_upload" src="upload.php"></iframe><iframe style="width:100%;height:300px;" id="iframe_images" src="images.php"></iframe><iframe style="width:100%;height:300px;" id="iframe_pdf_documents" src="pdf.php"></iframe></div>';



// declaring all variables
var code_to_be_inserted = '',
textarea_content = document.getElementById('content'),
iframe_upload = document.getElementById('iframe_upload'),
iframe_images = document.getElementById('iframe_images'),
iframe_pdf_documents = document.getElementById('iframe_pdf_documents');



// upload iframes of images and pdf documents when file is uploaded
iframe_upload.onload = function () {
iframe_images.src = 'images.php';
iframe_pdf_documents.src = 'pdf.php';
}



// add image to content editor
iframe_images.onload = function () {
    var images = iframe_images.contentWindow.document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
        images[i].onclick = function () {
            code_to_be_inserted = '<img alt="" src="'+this.src+'" />\n\n';
            textarea_content.value = code_to_be_inserted + textarea_content.value;
        }
    }
}



// add pdf documents to content editor
iframe_pdf_documents.onload = function () {
    var pdf_documents = iframe_pdf_documents.contentWindow.document.getElementsByTagName('a');
    for (var i = 0; i < pdf_documents.length; i++) {
        pdf_documents[i].onclick = function () {
            code_to_be_inserted = '\n\n<a href="' + this.href+'" target="_blank">Click here to open ' + this.innerHTML + '</a>';
            textarea_content.value = textarea_content.value + code_to_be_inserted;
            alert ('testar');
            return false;
        }
    }
}

Answer 1

I would make this one improvement:

iframe_images.onload = function () {
    var pdf_documents = iframe_pdf_documents.contentWindow.document.getElementsByTagName('a');
    var total = pdf_documents.length;
    for (var i = 0; i < total; i++) {
        pdf_documents[i].onclick = function () {
            code_to_be_inserted = '\n\n<a href="' + this.href+'" target="_blank">Click here to open ' + this.innerHTML + '</a>';
            textarea_content.value = textarea_content.value + code_to_be_inserted;
            alert ('testar');
            return false;
        }
    }
}

That way you’re not evaluating pdf_documents.length on every iteration. This will not harm your performance if that length is low, but if you’re going through huge lists, you will certainly want to define the total first and not in the loop.