如何使用按钮在html中显示js对象？
如何使用按钮在html中显示js对象？
提问于 2021-01-21 16:10:13
我现在正试着用html显示我的对象和方法。我的目标是有2个按钮在html (信息vacc1，信息vacc2，打印我的对象的信息。我的目标是在我的按钮下面输出它
下面是我的js代码：
function myVaccines(companyName, vaccName, Type, numberOfShots, doesNotContain){
this.companyName = companyName;
this.vaccName = vaccName;
this.Type = Type;
this.numberOfShots = numberOfShots;
this.doesNotContain = doesNotContain;
}
var vacc1 = Vacc("Pfizer-BioNTech","BNT162b2","mRNA","2 shots, 21 days apart","Eggs, Preservatives, Latex");
var vacc2 = Vacc("Moderna","mRNA-1273","mRNA","2shots, 28 days apart","Eggs, Preservatives, Latex",)这里是我的html：(还不知道在这里放些什么)
<button onclick="myVaccines(vacc1)">
Information Vaccine 1
</button>
<p>Output1?</p>
<button onclick="myVaccines(vacc2)">
Information Vaccine 2
</button>
<p>Output2?</p>回答 2
Stack Overflow用户
回答已采纳
发布于 2021-01-21 16:21:57
在这里使用JavaScript类，就像我在这种情况下推荐的那样。在它内部定义一个函数，该函数显示对象的属性，类似于Java中的toString()方法。
display() {
return this.companyName + " " + this.vaccName + " " + this.Type + " " + this.numberOfShots + " " + this.doesNotContain;
}为您的按钮提供it，并为每个按钮定义一个eventListener，以便在单击时侦听它。
document.getElementById("first").addEventListener('click', function() {
onclick调用对象的display()函数并在输出段落中显示内容
class Vaccines {
constructor(companyName, vaccName, Type, numberOfShots, doesNotContain) {
this.companyName = companyName,
this.vaccName = vaccName,
this.Type = Type,
this.numberOfShots = numberOfShots,
this.doesNotContain = doesNotContain
}
display() {
return this.companyName + " " + this.vaccName + " " + this.Type + " " + this.numberOfShots + " " + this.doesNotContain;
}
}
var vacc1 = new Vaccines("Pfizer-BioNTech", "BNT162b2", "mRNA", "2 shots, 21 days apart", "Eggs, Preservatives, Latex");
var vacc2 = new Vaccines("Moderna", "mRNA-1273", "mRNA", "2shots, 28 days apart", "Eggs, Preservatives, Latex", )
document.getElementById("first").addEventListener('click', function() {
document.getElementById("out1").innerHTML = vacc1.display();
});
document.getElementById("second").addEventListener('click', function() {
document.getElementById("out2").innerHTML = vacc2.display();
});<button id="first">
Information Vaccine 1
</button>
<p id="out1">Output1?</p>
<button id="second">
Information Vaccine 2
</button>
<p id="out2">Output2?</p>
Stack Overflow用户
发布于 2021-01-21 16:35:59
您可以稍微修改一下代码，使var vacc1和var vacc2成为用作输入的数组，并在调用打印内容的函数时使用splat运算符
function myVaccines(companyName, vaccName, Type, numberOfShots, doesNotContain){
let args=arguments;
printout(event,...args)
}
const printout=function(e,args){
e.target.nextElementSibling.textContent=args.join(',')
}
var vacc1 = ["Pfizer-BioNTech","BNT162b2","mRNA","2 shots, 21 days apart","Eggs, Preservatives, Latex"];
var vacc2 = ["Moderna","mRNA-1273","mRNA","2shots, 28 days apart","Eggs, Preservatives, Latex"];<button onclick="myVaccines(vacc1)">Information Vaccine 1</button>
<p></p>
<button onclick="myVaccines(vacc2)">Information Vaccine 2</button>
<p></p>
一个稍有不同的版本，使用Object literal作为输入，因此每个打印项目都分配了一个键(可能是从原始代码中)
function myVaccines(companyName, vaccName, Type, numberOfShots, doesNotContain){
let args=arguments;
printout(event,...args)
}
const printout=function(e,args){
e.target.nextElementSibling.textContent=Object.keys(args).map(key=>{
return [key,args[key]].join(':')
}).join( ', ' )
}
var vacc1={
companyName:'Pfizer-BioNTech',
vaccName:'BNT162b2',
Type:'mRNA',
numberOfShots:'2 shots, 21 days apart',
doesNotContain:'Eggs, Preservatives, Latex'
}
var vacc2={
companyName:'Moderna',
vaccName:'mRNA-1273',
Type:'mRNA',
numberOfShots:'2shots, 28 days apart',
doesNotContain:'Eggs, Preservatives, Latex'
}<button onclick="myVaccines(vacc1)">Information Vaccine 1</button>
<p></p>
<button onclick="myVaccines(vacc2)">Information Vaccine 2</button>
<p></p>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65823324
复制相关文章
相似问题
腾讯云开发者
