How can I use a parameter to change HTML text?-CodePudding

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?

CodePudding user response：

Made below changes in shoepoo.js

products.forEach((product)=> {
     document.getElementById("text").innerHTML = product.shoeName;
});

But you need to create dynamic HTML components if there is multiple data in products. Otherwise, it set the last shoeName in the paragraph component.

CodePudding user response：

Did you even call the shoeName() function? it isn't visible here, so I think, you must add it at the end of the code.