How to display image on webpage from javascript object key

Question

I just started learning JS, so this is exercise for me.

I have array of objects, for loop and input button.

var auto = [
    {
        ime: 'Fica',
        prod: '1955-1985',
        info: 'The Zastava 750....',
        img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Zastava_850_f.jpg/800px-Zastava_850_f.jpg'

    },

var input = document.getElementById("automobili");
var myH2 = document.getElementById("ime");
var myH3 = document.getElementById("prod");
var myH4 = document.getElementById("info");
var myH5 = document.getElementById('img');

function getInfo() {
    for (var i = 0; i < auto.length; i++) {
        if(input.value == auto[i].ime) {
            myH2.innerText = auto[i].ime;
            myH3.innerText = auto[1].prod;
            myH4.innerText = auto[i].info;
            myH5.innerText = auto[i].img;
            return;
        }    
    }

Input and loop is working, when i enter name it displays name of a car, prod years and info, but how to display image of a specific car on a webpage? Thank you :)

grudinsky · Accepted Answer · 2021-01-31 14:32:50Z

1

If your myH5 is an img element, this should do the job. Not sure if you noticed that you are using 'url' and 'imgUrl' key naming conventions for your image url in your data.

myH5.setAttribute("src", auto[i].img || auto[i].imgUrl );

answered Jan 31, 2021 at 14:32

grudinsky

986 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display image on webpage from javascript object key

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related