javascript - 如何在javascript中使用变量值

Question

当我点击按钮时，我想打印我的产品详细信息。
我有两个字典手表，这里的电视
是我的 javascript 代码，我使用show(btn)函数打印字典的值并btn保存字典的名称。但是当我写btn["name"]输出是未定义的。
但是当我点击手表按钮时，alert(btn)它会输出手表，或者我点击电视按钮，alert(btn)它会输出电视。
那为什么btn["name"]不工作。

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>

标签： javascripthtmlcss

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