如何在javascript中使用变量值

Question

我想在单击按钮时打印我的产品详细信息。
我有两个字典Watchs和TV
这里是我的javascript代码，在此我使用show(btn)函数打印字典的值，并使用btn保存字典的名称。但当我编写btn[“name”]时，输出是未定义的。
但当我单击“手表”按钮和警报(btn)时，它会将输出作为手表给我，或者单击“电视”按钮和警报(btn)时，它会将输出作为电视给我。
那么为什么btn[“name”]不起作用。

null

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>

null

Answer 1

您的show函数没有正确引用数据对象。我更新了show函数并声明了一个变量data以引用数据对象。

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);
  });
 
}