Javascript – PNG not showing when adding dynamically

javascript w3schools
javascript tutorial
javascript online
javascript meaning
javascript download
javascript code
javascript pdf
javascript operator

I’m a beginner JS coder and I’m struggling with the following – can anyone please help?

I’m trying to add a series of PNGs to a page using a function which will allow the placement of multiple copies of the same image and also assign a unique reference to each copy of the image.

The images are not showing in the page, plus the console.log() shows that the 2 images created by the code below both have the same position on the page.

var imgSrc = 'arrow_red.png';

function generateArrow(numArrows) {

    var img = document.createElement('img');
    img.src = imgSrc;

    for (i = 1; i <= numArrows; i++) { 
        window['arrow'+i] = img;
    }
}

generateArrow(2);

arrow1.style.position = 'absolute';
arrow1.style.top = '50px';
arrow1.style.left = '50px';

arrow2.style.position = 'absolute';
arrow2.style.top = '100px';
arrow2.style.left = '100px';

console.log(arrow1);
console.log(arrow2);

Why are the images not showing in the page and why does the console.log() show that the 2 images created are both using the same positional co-ordinates?

When you create a new element, it only exists in memory - - it hasn't been added to the document that the browser is currently rendering. So, it's not enough to create new elements and configure them. You must then inject them into the DOM with parentElement.appendChild(newChild).

Here's an example:

let newChild = document.createElement("img");
newChild.src = "https://static.scientificamerican.com/sciam/cache/file/D14B1C22-04F8-4FB4-95937D13A0B76545.jpg?w=590&h=393";

let parent = document.querySelector(".parent");
parent.appendChild(newChild); // <-- Now, inject the new element
img { width: 400px; }
<div class="parent"></div>

JavaScript Tutorial, JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most� In the search box, search for javascript.enabled; Toggle the "javascript.enabled" preference (right-click and select "Toggle" or double-click the preference) to change the value from "false" to "true". Click on the "Reload current page" button of the web browser to refresh the page.

You need to add the generated element to the DOM using the appendChild() method. Furhermore you're actually just generating a single instance of the image because it's happening once outside of the for-loop. This is why the console shows identical screen positions for 'both' images because actually you're referring to the same image instance.

Try this:

function generateArrow(numArrows) {
  var img;
  for (i = 1; i <= numArrows; i++) {
    img = document.createElement('img');
    img.src = imgSrc;
    document.body.appendChild(img);
    window['arrow' + i] = img;
  }
}

JavaScript, JavaScript often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time� Learn JavaScript or free with our easy to use input output machine. JavaScript.com is a resource for the JavaScript community. You will find resources and examples

You usually add elements to DOM using document.appendChild(element);, or in your case: document.appendChild(img);. (Or any preferred parent instead of document)


Edit: removed second part addressing variable declaration, since I didn't notice the window["arrow" + i] = img.

JavaScript, Modern JavaScript Tutorial: simple, but detailed explanations with examples and tasks, including: closures, document and events, object oriented programming� JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat.

The Modern JavaScript Tutorial, You will learn programming fundamentals and basic object-oriented concepts using the latest JavaScript syntax. The concepts covered in these lessons lay the � Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

Learn JavaScript, JavaScript is a fun and flexible programming language. It's one of the core technologies of web development and can be used on both the front-end and the � When comparing a string with a number, JavaScript will convert the string to a number when doing the comparison. An empty string converts to 0. A non-numeric string converts to NaN which is always false.

JavaScript Courses & Tutorials, JavaScript: A Quick Definition. JavaScript is a scripting language used to create and control dynamic website content, i.e. anything that moves, refreshes, or� The JavaScript for/of statement loops through the values of an iterable objects. for/of lets you loop over data structures that are iterable such as Arrays, Strings, Maps, NodeLists, and more. The for/of loop has the following syntax:

Comments
  • You are creating the images in memory, but never injecting them into the DOM with something like parent.appendChild(newChild).
  • Thank you for this comprehensive answer. As a beginner, I’m not sure I fully understand all of it just yet, but I’ll work through it until I do.