How to display image after setting display;none

Nafiz Imtiaz 0
Viewed 30

Though the problem is simple to expert. But as a beginner I am not finding right way for this issue. I set image display none in the innerhtml of display()function now in the flagsdisplay() function I want to display the flag images as block. I have tried in various way such as by class where by onclick whole countries flag images show altogether and by id just show the first flag. Now this is the last way I tried but don't know how to write the logic in flagsdisplay()function. Below I attached the code.

enter code here
fetch('https://restcountries.com/v3.1/all')
    .then(response => response.json())
    .then(json => display(json));

function display(datas) {
    let parent = document.getElementById("parent");
    //let imagediv = document.getElementById("parent1");

    datas.forEach(data => {
        let div = document.createElement('div');
        div.classList.add('list');

        div.innerHTML = `
        <li>country Nmae: ${data.name.common}</li>
        <li>country Continents: ${data.continents[0]}</li>
        <li>Total arae: ${data.area}</li>
        <img src="${data.flags.png}" alt="" style="display: none">
        <button onclick="flagdisplay('${data.flags.png}')">flag</button> `
         parent.appendChild(div);
     })
}
function flagdisplay(flags) {

    `  <img src="${flags}" alt="" style="display: block">` //this is what i want to do
}
javascript
1 Answers

If i understood you correctly, your function flagdisplay should look smth like this:

function flagdisplay(flags) {
    let imgs = document.getElementsByTagName['img'];
    
    for (var i = 0; i < imgs.length; i++) {
      if (imgs[i].src = flags) {
        return imgs[i].style.display = 'block';
      }
    }
}

This gets all images of the website, then iterates through them using a for-loop. When the src of the image matches your source flags, it changes its display to block. Not quite certain if this is what you were looking for though.

iwillieyou0
Related