How can I use a parameter to change HTML text? – Blancer.com Tutorials and projects

I’m using an API, and am trying to access the value of product.shoeName to change text on my HTML page. This is my code:

<!DOCTYPE html>
<html>
    
    <head>
        <script type="text/javascript" 
            src="shoepoo.js">
        </script>
    </head>
    <body>
      
        <div>
            <p id="text" style="color:purple; 
                font-weight:bold;font-size:20px;">
            </p>
            <script type="text/javascript"> shoeName(); </script>
        </div>

    </body>
</html>

const SneaksAPI = require('sneaks-api');
const sneaks = new SneaksAPI();

//getProducts(keyword, limit, callback) takes in a keyword and limit and returns a product array 
function shoeName(){
sneaks.getProducts("Jumbo Blazer", 1, function(err, products){
    
    products.forEach(
        function names (product) {
            document.getElementById("text").innerHTML = product.shoeName;
    })
    
});
};

Basically, I want product.shoeName to be shown as text, but nothing is showing up. How can I fix this? I understand it’s a local function which is probably stopping the data from being shown (or something like that), but how can I work around this?