Динамическое создание img через ссылку без присоединения нескольких экземпляров

Question

У меня есть ссылка, которая прилагается с функцией «onclick». При нажатии он присоединяет элемент img в отдельный div, называемый «mediaBox». Проблема, с которой я сталкиваюсь, заключается в том, что если она нажата несколько раз, она добавляет больше экземпляров img. Как я могу это контролировать. Я по-прежнему новичок в JavaScript, и я предпочитаю получать этот ответ в чистом Javascript, а не в jQuery, поскольку я перейду через этот мост после того, как у меня будет полное понимание Javascript.

var rkf = document.getElementById("submenulinks").getElementsByTagName("li")[0]; 

rkf.onclick = function(){ 
    var client = document.getElementById('client'); 
    var description2 = document.getElementById('description2'); 
    var role = document.getElementById('role'); 
    var mediaBox = document.getElementById('mediaBox'); 
    var thumb = document.getElementById("thumb");  
    var client2 = document.getElementById("client2"); 
    var newImage = document.createElement("img"); 

    client2.innerHTML = "Role - Applications"; 
    client.innerHTML = "RKF Real Estate"; 
    client2.innerHTML = "Role - Applications"; 
    description2.innerHTML = "Quarterly Catalog of Exclusive Listings managed by RKF"; 
    role.innerHTML = "Custom designed Cover and listings content. Tables were also utilized within Indesign. <br><br><b><i> Photoshop and Indesign</i></b>"; 

    newImage.setAttribute("src", "../images/rkf_cover.jpg"); 
    newImage.setAttribute("height", "500px"); 
    newImage.setAttribute("width", "387px"); 
    newImage.setAttribute("alt", "rkf"); 
    newImage.setAttribute("href", "#"); 
    mediaBox.style.backgroundImage = "none"; 
    document.getElementById("mediaBox").appendChild(newImage); 
    newImage.style.display = "block"; 
    newImage.style.marginLeft = "auto"; 
    newImage.style.marginRight = "auto"; 
    newImage.style.marginTop = "25px"; 
}   

Answer 1

rkf.onclick = function(){ 
    var client = document.getElementById('client'); 
    ... 
    ... 
    ... 

    // Remove the handler after it ran once. 
    this.onclick = null; // <<<<<======================== 
}  

Поскольку вы хотите использовать JQuery в будущем, он равен:

$('#submenulinks li:first').one('click', handler);