I have three links that express three different images. I want to push these links to an array and I can show off my images on the screen. How can I do that
This is my JS code, is that correct ?? Thanks a lot.
let cardsource = [
"<a href = 'https://bom.to/Qd87vw'> Card 1</a>",
"<a href = 'https://bom.to/P21flg'>Card 2 </a>",
"<a href = 'https://bom.to/dFwwNw'>Card 3 </a>",
];
for (var index = 0; index < cardsource.lengh; index++) {
console.log(cardsource[index]);
}Don't push tag inside array, just push the link which directly gives you the image.
let cardsource = ['https://bom.to/Qd87vw', 'https://bom.to/P21flg', 'https://bom.to/dFwwNw'];
cardsource.map((item) => <img src={item}>)
This is just to give you the logical view on what you must do instead what you have done. If you are working with .jsx this code would work.
Please use insertAdjacentHTML function. Reference
let cardsource = [
"<a href = 'https://bom.to/Qd87vw'> Card 1</a>",
"<a href = 'https://bom.to/P21flg'>Card 2 </a>",
"<a href = 'https://bom.to/dFwwNw'>Card 3 </a>",
];
cardsource.map(val => document.body.insertAdjacentHTML('beforeend', val));