我想在单击按钮时打印我的产品详细信息。
我有两个字典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
您的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);
});
}
