Leaflet Get coordinates

CSS

.container {

    text-align: center;

}

input, button, .results {

    height: 50px;

    font-size: 20px;

}

input {

    width: 500px;

    margin-top: 100px;

}

button {

    margin: 10px;

    background-color: rgb(7, 78, 7);

    color:    white;

    width: 200px;

}

button:hover {

    background-color: rgb(116, 235, 61);

    color:   rgb(50, 50, 50);

}

HTML

<div class="container">

    <input type="text" placeholder="address" id="address">

    <br>

    <button onclick="findAddress()">Search</button>

    <div id="results"></div>

</div>

JS

var address = document.querySelector("#address")

var results = document.querySelector("#results")

function showAddress() {

    results.innerHTML  = ' '

    if (addressArr.length > 0) {

        addressArr.foreach(element => {

            results.innerHTML +=  "<div class='results'>" 

                                            + element.display_name 

                                            + "<br> Lat: " + element.lat

                                            + " Lng: " + element.lon

                                            + "</div>"  

        }

    } 

    else {

        results.innerHTML  = "<p style='color: red;'>Not found</p>"

    }

}

function showAddress() {

    var url = "https://nominatim.openstreetmap.org/search?format=json&limit=3&q=" + address.value 

    fetch(url)

                  .then(response => response.json())

                  .then(data => addressArr = data)

                  .then(show => showAddress())

                  .catch(err => console.log(err))    

}