'How can I use a parameter to change HTML text?

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?

javascripthtmlfunctioninnerhtml


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shivam Sharma

Related Questions