How can I run a function and return output as image src javascript

Question

I have a function that determines which source the image will be:

function facilityImg(arr, x) {
    switch (arr[x]) {
        case 'Yes':
            return "Images/checked.png";
        case 'No':
            return "Images/unchecked.png";
    }
}

Where arr is an array of Yes/No strings, and x is the index of each value.

I am trying to run this function like this:

let html = `<div class="facilityCell">
               <img class="facilityIcon" title="Air-Conditioner" src="Images/air-conditioner.png">
               <img class="facilityIcon" src='facilityImg(${facilityArr}, 0)'>
            </div>`

When inspecting the html element, I get this as the src:

Is there something I am doing wrong? I have tried with [src] and :src which should apparently work. And before you shoot me down in the comments, I am repeating this code but slightly different each time for a minor project - cant be bothered to write out another 400 lines in the correct way.

Is what I am wanting to do possible?

@AHMEDSAJJAD kindly post it as an answer so can mark it as an answer, as it can help someone in future. — Wahab Shah
– Wahab Shah, Commented Jul 29, 2021 at 9:53
Posted it as an answer. @Elliot Cullen please accept it as the answer — AHMED SAJJAD
– AHMED SAJJAD, Commented Jul 29, 2021 at 9:53

AHMED SAJJAD · Accepted Answer · 2021-07-29 09:53:10Z

1

You just need to correct the interpolation of your function. Try

let html = `<div class="facilityCell">
              <img class="facilityIcon" title="Air-Conditioner" src="Images/air-conditioner.png">
              <img class="facilityIcon" src="${facilityImg(facilityArr, 0)}">
            </div>`

Hope that fixes it

answered Jul 29, 2021 at 9:53

AHMED SAJJAD

3252 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

How can I run a function and return output as image src javascript

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