如何使用按钮在 html 中显示 js 对象答案

【问题标题】：How do i display js objects in html with a button如何使用按钮在 html 中显示 js 对象
【发布时间】：2021-04-25 15:09:20
【问题描述】：

我目前正在尝试在 html 中显示我的对象和方法。我的目标是在 html 中有 2 个按钮（info vacc1，info 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>

【问题讨论】：

标签： javascript html methods javascript-objects

【解决方案1】：

这里使用了 JavaScript 类，我会在这种情况下推荐。在其中定义一个函数，该函数显示对象的属性，类似于 Java 中的 toString() 方法。

display() {
    return this.companyName + " " + this.vaccName + " " + this.Type + " " + this.numberOfShots + " " + this.doesNotContain;
  }

为您的按钮提供 ID 并为每个按钮定义一个事件监听器，以便在单击时进行监听。

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>

【讨论】：

【解决方案2】：

您可以稍微修改一下代码，使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>

【讨论】：