[英]how to use variable value within the javascript
I want to print my product details when i click on button.当我点击按钮时,我想打印我的产品详细信息。
I have two dictionaries watches and
Tv
我有两本字典手表和
电视
here is my javascript code in this i use show(btn)
function to print values of dictionary and btn
saves name of the dictionary.这是我的 javascript 代码,我使用
show(btn)
function 打印字典的值, btn
保存字典的名称。 But when i write btn["name"]
output is undefined.但是当我写
btn["name"]
output 时未定义。
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.但是当我点击手表按钮和
alert(btn)
时,它给我 output 作为手表,或者我点击电视按钮和alert(btn)
它给我 output 作为电视。
Then why btn["name"]
is not working.那么为什么
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>
Your show function didn't reference the data object properly.您的节目 function 没有正确引用数据 object。 I updated your show function and declare a variable data to reference to data 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);
});
}
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
.您不能获取
String
值并将其视为变量,您传递给 show watches
的是一个String
值,它与变量 watch 和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.我建议创建一个 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.