Tips for aligning multiple identical images horizontally using Javascript

I am attempting to use the following code to display the same image 19 times and then center all of those images horizontally on the page as a whole. However, I have been unsuccessful in getting it to work.

var totImg = "large.png"; 

function prettyHeader(){
    function totoroImg(){
        var img = document.createElement("img");
        img.style.width = "30px";
        img.style.height = "30px";

        img.src=totImg;
        return img;
    }

    for(var totPrint=0; totPrint<20; totPrint++){
        document.body.appendChild(totoroImg());
    }
}

prettyHeader();

Answer №1

const imageLink = "https://placeimg.com/30/30/animals";

function createHeaderImages(){
  function displayImage(){
    const image = document.createElement("img");
    image.style.width= "30px";
    image.style.height= "30px";
    image.src = imageLink;
    return image;
  }

  for(let i=0; i<20; i++){
    document.body.appendChild(displayImage());
  }
}

createHeaderImages();

document.body.style = "display: flex; justify-content: center; flex-direction: row";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error Message: Error Code 2. I am encountering an issue with the bot expecting either undefined or null and receiving a string primitive instead. Any

As I delved into creating a music bot with support for slash commands, everything seemed to be going smoothly when embedding a URL to a single song. However, the trouble began when attempting to include a link to a playlist, resulting in two perplexing err ...

What is the method for altering the date format of a published article?

I am looking to modify the date format of a published post in WordPress. Currently, the date format is <?php the_time('m.d.y'); ?></div>, which appears as "1.20.2018". My goal is to change it to "January 20, 2018". Can anyone guide ...

Limit on the number of users for organizations

Creating a website that connects users to organizations, where users can request to join an organization that has a 500 people limit. However, the function is not working correctly as it fails to check if the current number of users (current_users) is less ...

I'm having trouble with class attributes not functioning properly in TypeScript within Angular. What steps can I take to resolve this issue

Currently, I am in the process of mastering Angular, CSS (particularly Tailwind), HTML, and TypeScript as a means to construct a website. Despite clicking the menu button on the navigation bar thrice, I was puzzled why this.name appeared as undefined duri ...

Sending dynamic internationalization resources from Node.js to Jade templates

Looking for a way to show a custom error page to the user in case of an error, but it needs to be internationalized (i18n-ed). Solution: My idea is to validate in node -> if not accepted -> res.render('error', {message: errorMessageNameToo ...

The reactivity of Vuex and Vue does not work as expected when a dictionary is used as a

What is the best approach to make a dictionary reactive as one of my store variables? Unlike an array, dictionaries are not reactive by default. Here's a minimal example I've created: Check out this example on CodeSandbox ...

Personalized validation messages with jQuery

I am currently working on a contact form using jQuery, but I am facing challenges in displaying my custom validation messages. Instead of showing the message I specified, it only displays a small popup with the generic message: "Please fill in the form". I ...

Adjust the size of the textarea to accommodate the number of lines of text

<script type="text/javascript"> function AutoGrowTextArea(textField) { if (textField.clientHeight < textField.scrollHeight) { textField.style.height = textField.scrollHeight + "px"; if (textField.clientHeight ...

Coming back from the setState callback

In my code, I have a scenario where the Parent component is calling a function from the Child component using refs. Within the Child component function, there is a this.setState method with a callback function embedded in it. handleSaveProject = async () ...

React Native Transparent Modal Issue: Solution Needed

Recently, I encountered a problem with using a Modal to disable interactions on a screen while keeping everything visible. Oddly enough, it was working perfectly fine before, but when I attempted to turn the Modal into its own component, things took a turn ...

Increase the parent height by 100% when the child element expands

I am attempting to create a full-screen website with 100% height and no scrollbar. I have a div that takes up 90% of the page height and I want to dynamically add elements inside it. However, when there are too many elements inside this div, they expand th ...

Validation message does not seem to be disappearing on input

My form validates input fields, including textboxes and radio buttons. The validation error messages display correctly when trying to submit the form with incomplete fields. However, once a field has the required data, the validation error should disappear ...

Integrating Python Script with User Input and Output within a JavaScript Web Application

I have an existing JS website that requires additional functionality, and after some research I believe Python is the best tool to handle the necessary calculations. My goal is for users to input information that will then be used as input for my Python ...

Are these 2 components very similar, with the only distinction being the unique GET request for each? Should we combine them into one?

There are currently two components in my project that are nearly identical. The HTML structure and CSS rules are the same, with the only difference being the GET request made in the mounted() lifecycle hook. One component fetches all visited places, while ...

Even after applying the CSS property "resize:none" to my HTML textarea, I still find it to be adjustable in size when viewed in the Opera browser

I'm currently working on customizing my HTML page and I want to ensure that all text inputs are consistent in size. I attempted to use the text-area selector in CSS, but it didn't seem to work correctly in Opera. The resize handle disappeared in ...

Cross domain requests with jQuery's getJSON function

Struggling to fetch data using jQuery Cross Domain from GitHub, but hitting a roadblock! I've come across suggestions to use jsonp requests, but can't seem to figure out what's going wrong. http://jsfiddle.net/jzjVh/ Chrome seems to be int ...

How to Handle Empty Input Data in JQuery Serialization

Having an issue with a form that triggers a modal window containing another form when a button is clicked. The second form includes an input field and send/cancel buttons. The goal is to serialize the data from the modal form and send it to a server using ...

Why is jQuery not recognizing the variable, but when I manually input the exact same value it works?

Explained using a code snippet: $(".myParent .myChild:nth-child(3n)").css('border-top-color','#ffffff'); √ Success myVar = "3n"; $(".myParent .myChild:nth-child(myVar)").css('border-top-color','#ffffff'); ...

Is it possible to combine multiple jQuery selectors for one command?

I need some help with jQuery commands. I have two similar commands, but not exactly the same. Here are the commands: $("#abc > .className1 > .className2 > .className3"); $("#pqr > .className1 > .className2 > .className3"); Is there a w ...

Display different modal based on URL using jQuery

Is there a way to display a specific modal based on the URL? I'm utilizing Bootstrap as my responsive framework. Currently, I have multiple modals, but for simplicity let's focus on two: privilege_10 privilege_11 These modals are triggered u ...