如何在 javascript 中使用變量值

Question

當我點擊按鈕時，我想打印我的產品詳細信息。
我有兩本字典手表和電視
這是我的 javascript 代碼，我使用show(btn) function 打印字典的值， btn保存字典的名稱。 但是當我寫btn["name"] output 時未定義。
但是當我點擊手表按鈕和alert(btn)時，它給我 output 作為手表，或者我點擊電視按鈕和alert(btn)它給我 output 作為電視。
那么為什么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>

Answer 1

您的節目 function 沒有正確引用數據 object。 我更新了您的節目 function 並聲明了一個變量數據以引用數據 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

您不能獲取String值並將其視為變量，您傳遞給 show watches的是一個String值，它與變量 watch 和Tv完全不同。

我建議創建一個 object，其中watches和Tv作為鍵，然后您可以使用傳遞給 function 的String來訪問 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>