JavaScript - Placing Image Caption and Details within a Box

        <div id="CollectionALL">
            <div id="collection1" class="col">
                <img id="Img1" class="imageCS"/>
                <H1 id="Title1"></H1>
                <p id="Text1"></p>
            </div>
            <div id="collection2" class="col">
                <img id="Img2" class="imageCS"/>
                <H1 id="Title2"></H1>
                <p id="Text2"></p>
            </div>
        </div>

Hello there,

I'm new to using javascript and I'm looking for guidance on how to replace or insert an image into each of the Img1, Img2, and Img3 tags.

I think once I figure out how to handle the image, updating the title and text should follow a similar method, right?

function displayResult()
{
    var collect1=document.getElementById("img1").rows[0];
    var x=collect1.insertCell(-1);
    x.innerHTML="<img src='img/abc.png' alt='collection1'/>";
}

Answer №1

To populate the content of h1, p, and img elements within your container, you must first specify the selectors for each element. Following this, you can utilize the setAttribute and innerHTML functions to assign the desired content.

Subsequently, you can encapsulate the process within a loop to iterate through the result array. The code snippet provided below exemplifies how this can be achieved within the loop.

in this manner

function displayResult()
{
    var collect = document.getElementById("collection1");
 
    let img = collect.querySelector('img');
    let h1 = collect.querySelector('h1');
    let p = collect.querySelector('p');
    img.setAttribute('src', "https://via.placeholder.com/100");
    h1.innerHTML = "collection1";
    p.innerHTML = "some text"
  
}

displayResult()
        <div id="CollectionALL">
            <div id="collection1" class="col">
                <img id="Img1" class="imageCS"/>
                <H1 id="Title1"></H1>
                <p id="Text1"></p>
            </div>
            <div id="collection2" class="col">
                <img id="Img2" class="imageCS"/>
                <H1 id="Title2"></H1>
                <p id="Text2"></p>
            </div>
        </div>

Answer №2

It seems like I may have misunderstood your question, but if I am correct, there is no need to use JavaScript here. You can simply input your src, title, and text through HTML.

        <div id="CollectionALL">
        <div id="collection1" class="col">
            <img id="Img1" class="imageCS" src="img/abc.png">
            <h1 id="Title1">My Title</h1>
            <p id="Text1">My Text</p>
        </div>
        <div id="collection2" class="col">
            <img id="Img2" class="imageCS" src="img/abc.png>
            <h1 id="Title2">My Title</h1>
            <p id="Text2">My Text</p>
        </div>
    </div>

It's important to note that "img" is not a tag with a closing, so it should end with a />:

            <img id="Img2" class="imageCS"/>

Additionally, tags in HTML are case-sensitive, meaning "H1" is not a valid tag, but "h1" is.

Answer №3

let imageElement= document.getElementById("Image1");
imageElement.src = "xyz.jpg";
let titleElement= document.getElementById("Title1");
titleElement.textContent = "A Unique Title Here";
let textElement= document.getElementById("Text1");
textElement.textContent = "asdfg some content";

Decided to go with this approach. Looks like it's functioning well.
Appreciate the help

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

Managing business logic in an observable callback in Angular with TypeScript - what's the best approach?

Attempting to fetch data and perform a task upon success using an Angular HttpClient call has led me to the following scenario: return this.http.post('api/my-route', model).subscribe( data => ( this.data = data; ...

Learn how to display specific text corresponding to a selected letter from the alphabet using Vanilla JavaScript

I am extracting text from a JSON file. My goal is to enable users to click on a specific letter and have the corresponding text displayed. For example, if someone clicks on 'A', I want to show the text associated with 'A'. An example of ...

Utilizing API to Save Images Directly from the Client Side

I am currently in the process of redesigning a website, specifically the Blog section which includes a featured image. I have been researching the best method for saving these images. After following a tutorial that utilized the file.mv() function from ei ...

How should one go about creating an npm package out of a vuejs component and testing it locally?

Initially, I created a vuejs project as a test container using vue-cli. Next, I developed an npm package named "vue-npm-example" from a Vuejs component in my local environment and then imported it into the aforementioned testing project. Within the packag ...

Jquery allows for the toggling of multiple checkboxes

I have a group of check-boxes that I would like to toggle their content when checked. Currently, I am using jQuery to achieve this functionality, but I am searching for a way to optimize my code so that I do not need to write a separate function for each ...

Tips for simulating focus on a Material-ui TextField with a button press

My web application features a unique method for indirectly filling in text fields. Since there are multiple clicks involved (specifically in a calendar context) and numerous fields to fill, I want to provide users with a visual indication of which field th ...

What is the method for accessing the z-index property of an element in Selenium using Python?

Is it possible to confirm the depth of web elements by checking the "z-index" attribute? Successfully locating an element can be achieved using one of the two statements below. e = WebDriverWait(tA.driver,1).until(EC.visibility_of_element_located((By.XPA ...

Troubleshooting: Django project not functioning properly post transfer from Windows to Mac

Using Django 3.1.7 on a MacBook Pro now, I recently moved the Django project from a Windows 10 machine. Despite setting up the database and superuser again, running pipenv sync didn't result in serving any of my URLs or Admin page CSS styles. The serv ...

sending live video from a Python server to a browser-based client

Is there a way to stream a video from a python server to an HTML page web client (Node.js)? In my Node.js web project, I am currently using Python to write frames and JavaScript to read them. However, I am facing limitations with both frame rate and resol ...

Setting value in Angular's ng-repeat directive

Utilizing ng-repeat, I am creating a table with radio buttons. The main goal is to assign each radio button a value based on the position of the object in the original array (before any sorting takes place). However, using $index assigns the position in ...

Positioning a text directly next to an image that are both hyperlinked to the same webpage located in the center of the image

When viewing my site on a mobile device, I want to have an image with text next to it that both link to the parent menu. However, I'm facing an issue with the text not aligning properly (it should be centered within the picture height but appears at t ...

Using AngularJS to send data from a controller to a factory

Looking to implement a basic pagination feature with data from the backend. Each page should display 10 activities. /feed/1 -> displays 0-10 /feed/2 -> displays 10-20 /feed/3 -> displays 20-30 The goal is to start at page 1 and increment the pag ...

What specific version is indicated by the @next tag for npm packages?

Which version of the foo package will be installed by running this command? npm install foo@next Neither the package.json nor the semver documentation make reference to the use of next. ...

Displaying HTML content using Typescript

As a newcomer to typescript, I have a question regarding displaying HTML using typescript. Below is the HTML code snippet: <div itemprop="copy-paste-block"> <ul> <li><span style="font-size:11pt;"><span style="font-family ...

The $_POST value is consistently the final entry within my <tr> element

I'm facing a challenge that has me stuck. I have a basic webpage where I display a table of all Users queried from a database. The idea is that when a user clicks on a table row, they should be redirected to another page where they can edit the select ...

Issue with React Google Maps Api: Error occurs while trying to access undefined properties for reading 'emit'

I'm trying to integrate a map using the google-map-react API, but I keep encountering the following error: google_map.js:428 Uncaught TypeError: Cannot read properties of undefined (reading 'emit') at o.r.componentDidUpdate (google_map.js: ...

What is the best way to import all Vue3 components asynchronously?

I've been struggling to get the components to work properly. My goal is to store component names in an array, import them asynchronously, and then somehow assign them to app.component. I've spent about six hours on this and just can't seem t ...

What is the best way to manage a significant volume of "business" data or objects within my JavaScript project?

I specialize in working with AngularJs and have a factory that provides services related to buildings. I am managing a large number of buildings (around 50-60) with multiple properties and sub-properties associated with each one (approximately 15-20, some ...

Instructions for changing the background color of a value

I'm working with a code that populates values in table columns, but the text displays in black color. I would like to highlight the text with a blue background. Here is the HTML code snippet: <body> <div class="container"> ...

The masonry plugin overlays images on top of each other

I have gone through similar questions but haven't found anything that applies to my specific case. Following an ajax call, I am adding li elements to a ul $.ajax({ url: 'do_load_gallery.php?load=all' }).done(function(result) { ...