Soy un novato en JS y trato de aprender cómo funciona la API. Estaba tratando de obtener datos de API de usuario aleatorio, pero recibo este error "Error de tipo no detectado (en promesa): no se pueden leer las propiedades de undefined"

Aquí está mi código:

 const url = 'https://randomuser.me/api/'; const btn = document.getElementById('button'); const output = document.getElementById('output'); btn.addEventListener('click', getData); function getData(){ output.innerHTML = ""; fetch(url).then(function(response){ return response.json() }).then(function (data) { console.log(data.results); const val= data.results; let div = document.createElement('div'); div.textContent = `${val.name.title} ${val.name.first} ${val.name.last}`; let ima = document.createElement('img'); ima.setAttribute('src', data.results.picture.thumbnail); ima.style.display = 'block'; div.appendChild(ima); output.appendChild(div); }); }