问当单击相应的按钮时，我需要显示这个内容:/ ${item.type} the ${item.address} {item.rent} ${item.rent}

EN

<!--The HTML-->
<button id="omg-homes">OMG Homes</button>
<div id="omg-homes-results"></div>

<button id="beach-homes">Beach Homes</button>
<div id="beach-homes-results"></div>

<div id="all-homes"></div>

//
// const suggestion = ['ded','eded','ede','e']
// Lakefront Beach Cabins OMG! National parks

const homes = [
    {
        type: 'Lakefront',
        image: 'https://picsum.photo/200?random=1',
        address: '1 Sample St',
        city: 'Boston',
        rent: 200
    },
    {
        type: 'Beach',
        image: 'https://picsum.photo/200?random=1',
        address: '1 James St',
        city: 'Boston',
        rent: 200
    },
    {
        type: 'Beach',
        image: 'https://picsum.photo/200?random=1',

        address: '1 Anon St',
        city: 'Boston',
        rent: 200
    },
    {
        type: 'National parks',
        image: 'https://picsum.photo/200?random=1',

        address: '1 Sample St',
        city: 'Boston',
        rent: 200
    },
  {
        type: 'National parks',
        image: 'https://picsum.photo/200?random=1',

        address: '1 Sample St',
        city: 'Boston',
        rent: 200
    },
   {
        type: 'National parks',
        image: 'https://picsum.photo/200?random=1',
        address: '1 Sample St',
        city: 'Boston',
        rent: 200
    },
    {
        type: 'OMG',
        image: 'https://picsum.photo/200?random=1',

        address: '1 Jerry St',
        city: 'Boston',
        rent: 200
    },
    {
        type: 'OMG',
        image: 'https://picsum.photo/200?random=1',
        address: '1 Josh St',
        city: 'Boston',
        rent: 200
    }
];

// const home1 =  {
//     type: 'Beach',
//     image: 'https://picsum.photo/200?random=1',
//
//     address: '1 Anon St',
//     city: 'Boston',
//     rent: 200
// };

// console.log(  home1.type === 'Beach'  );

/**
 * Finds beach homes
 *
 * @param item
 * @returns {boolean}
 */
function getBeachHomes(item){
    if( item.type === 'Beach' ){
        return true;
    }

    return false;
}

function getOMGHome(item){
    if(item.type === 'OMG'){
        return true;
    }

    return false;

}
// Array.filter( fn )
const beachHomes = homes.filter( getBeachHomes  );
const omgHomes = homes.filter( getOMGHome );

// Array.forEach( fn )

//beachHomes.forEach( function(item){
     //console.log(`
           // ${item.type} | ${item.address} |  ${item.rent}
// `)
// } )

omgHomes.forEach(  (item) => {
//     console.log(`
//            ${item.type} | ${item.address} |  ${item.rent}
// `)
} )



document.getElementById("beach-homes").addEventListener("click", beachHomes);