How to Pass Object Value From A Javascript File to HTML File

Question

I created an object with an array of products and I want to retrieve its value in a label in my html file but I don't know what's the right format. My javascript and html file are in separated files. Can someone help me with this. Thanks a lot!

 const database = [ { name: "test", brand: "test", description: "test desc", price: "100", }, { name: "test2", brand: "test brand", description: "test desc2", price: "200", }, { name: "test3", brand: "test brand", " description": "test desc3", price: "300", }, ]; function addToCart() { return console.log(database[0].name) }

 <div class="card"> <img src= "img/1.jpg" alt="Avatar"> <div class="container"> <span> <input type="text" placeholder="Enter items" id="productName" value=$database[0].name /> <button onclick="addToCart()" id="addToCart">Buy</button> </div> </div>

Answer 1

 const database = [ { name: "test", brand: "test", description: "test desc", price: "100", }, { name: "test2", brand: "test brand", description: "test desc2", price: "200", }, { name: "test3", brand: "test brand", " description": "test desc3", price: "300", }, ]; function addToCart() { document.getElementById('productName').value = database[0].name; }

 <div class="card"> <img src= "img/1.jpg" alt="Avatar"> <div class="container"> <span> <input type="text" placeholder="Enter items" id="productName"/> <button onclick="addToCart()" id="addToCart">Buy</button> </div> </div>

try this. it will work