how to use variable value within the javascript

Question

I want to print my product details when i click on button.
I have two dictionaries and 和
here is my javascript code in this i use show(btn) function to print values of dictionary and btn saves name of the dictionary. But when i write btn["name"] output is undefined.
but when I click on watches button and alert(btn) it gives me output as watches or I click on Tv button and alert(btn) it gives me output as Tv.
Then why btn["name"] is not working.

 var watches = { name: "Titan", price: "8,999", country: "Indian" } var Tv = { name: "Mi Tv", price: "20,999", country: "China" } function show(btn){ document.getElementById("name").innerHTML = btn["name"]; document.getElementById("price").innerHTML = btn["price"]; document.getElementById("country").innerHTML = btn["country"]; } var j = document.querySelectorAll(".product").length; for(var i=0; i<j; i++){ document.querySelectorAll("button")[i].addEventListener("click",function(){ var btn = this.innerHTML; show(btn); }); }

 table,th,td{ border:2px solid black; border-collapse:collapse; padding:10px; text-align:left; }

 <button class="product">watches</button> <button class="product">Tv</button> <table> <tr> <th>Name of the Product</th> <td id="name">--</td> </tr> <tr> <th>Price</th> <td id="price">--</td> </tr> <tr> <th>Country</th> <td id = "country">--</td> </tr> </table>

Answer 1

Your show function didn't reference the data object properly. I updated your show function and declare a variable data to reference to data object.

var watches = {
    name : "Titan",
    price: "8,999",
    country : "Indian"
}
var Tv = {
    name : "Mi Tv",
    price: "20,999",
    country : "China"
}

function show(btn){
    var data = (btn ==="watches")? watches :Tv ;
    document.getElementById("name").innerHTML = data["name"];
    document.getElementById("price").innerHTML = data["price"];
    document.getElementById("country").innerHTML = data["country"];
}
var j = document.querySelectorAll(".product").length;

for(var i=0; i<j; i++){
  document.querySelectorAll("button")[i].addEventListener("click",function(){
    var btn = this.innerHTML;
    show(btn);
  });
 
}

Answer 2

You cannot take a String value and treat it as a variable, what you're passing to the show function is a String value which is not at all same as the variables watches and Tv .

What I would recommend is create an object with watches and Tv as keys and then you can use the String passed to the function to access the particular property on the object.

 const products = { watches: { name: "Titan", price: "8,999", country: "Indian" }, Tv: { name: "Mi Tv", price: "20,999", country: "China" } } function show(btn) { document.getElementById("name").innerHTML = products[btn]["name"]; document.getElementById("price").innerHTML = products[btn]["price"]; document.getElementById("country").innerHTML = products[btn]["country"]; } var j = document.querySelectorAll(".product").length; for (var i = 0; i < j; i++) { document.querySelectorAll("button")[i].addEventListener("click", function() { var btn = this.innerHTML; console.log(btn); show(btn); }); }

 table, th, td { border: 2px solid black; border-collapse: collapse; padding: 10px; text-align: left; }

 <button class="product">watches</button> <button class="product">Tv</button> <table> <tr> <th>Name of the Product</th> <td id="name">--</td> </tr> <tr> <th>Price</th> <td id="price">--</td> </tr> <tr> <th>Country</th> <td id="country">--</td> </tr> </table>