<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>
Hi all,
I'm just starting out on javascript and would like to check how i should go about replacing or inserting an image into each of the Img1, Img2 and Img3 tags.
I believe once i'm able to figure out the image, the title and texts should be in the same method?
function displayResult()
{
var collect1=document.getElementById("img1").rows[0];
var x=collect1.insertCell(-1);
x.innerHTML="<img src='img/abc.png' alt='collection1'/>";
}
You need to specify the selectors for h1, p, img inner your container. then you can use setAttribute and innerHTML function to set content.
Then you can wrapped inside a loop and iterate the result array. The example below will shows you how it works inside the loop.
like that
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>I'm unsure if I understood your question correctly, but if I did I see no use for JS to be used in here. Simply insert your src, title and text through the 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>
note that "img" is not a tag with a closing, thus ending it with a />:
<img id="Img2" class="imageCS"/>
is not quite right. Also, tags in HTML are case-sensitive, and so "H1" is not a valid tag, but "h1" is.
var ImgA= document.getElementById("Img1");
Img1.src = "abc.jpg";
var TitleA= document.getElementById("Title1");
TitleA.textContent = "Some Title Header Thing";
var TextA= document.getElementById("Text1");
TextA.textContent = "qwerty some text";
I think i'll be doing it this way.
Seems to work
Thanks to everyone