Javascript 在同一页上运行两个showDiv（）函数

我刚刚开始使用Javascript，我试图找出如何区分同一页面上的两个showDiv（）函数

我想能够点击“购买”按钮，让一个div出现，或者点击“捐赠”按钮，让另一个div出现。总体目标是，单击“购买”按钮时将显示购买产品的表单，而单击“捐赠”按钮时将显示捐赠表单

我知道目前它只是运行第二个功能而忽略了第一个功能，那么什么是将按钮链接到各自功能的最佳方式，以便两个功能都能工作

代码如下：

函数showDiv（）{
document.getElementById（'shirt-form'）.style.display=“block”；
}
函数showDiv（）{
document.getElementById（'generate-form'）.style.display=“block”；
}

input.buy{
颜色：白色；
背景#a50b0b；
填充：10px 30px 10px 30px；
字体系列：“Cairo”、Helvetica、Arial、Lucida、无衬线字体；
字体大小：30px；
盒影：无；
边界：无；
}
输入。购买：悬停{
背景色：rgb（74109130）！重要；
}
捐赠{
颜色：白色；
背景#a50b0b；
填充：10px 30px 10px 30px；
字体系列：“Cairo”、Helvetica、Arial、Lucida、无衬线字体；
字体大小：30px；
盒影：无；
边界：无；
}
输入。捐赠：悬停{
背景色：rgb（74109130）！重要；
}

购买



更改其中一个函数名，它们的名称应不同，以便底部的函数名不会覆盖顶部的函数定义

function showDivShirt() {
    document.getElementById('shirt-form').style.display = "block";
}

function showDivDonate() {
    document.getElementById('donate-form').style.display = "block";
}

更改其中一个函数名，它们的名称应不同，以便底部的函数名不会覆盖顶部的函数定义

function showDivShirt() {
    document.getElementById('shirt-form').style.display = "block";
}

function showDivDonate() {
    document.getElementById('donate-form').style.display = "block";
}

您必须给出两个不同的函数名


函数showShirtDiv（）{
document.getElementById（'shirt-form'）.style.display=“block”；
}
函数showDonateDiv（）{
document.getElementById（'generate-form'）.style.display=“block”；
}
input.buy{
颜色：白色；
背景#a50b0b；
填充：10px 30px 10px 30px；
字体系列：“Cairo”、Helvetica、Arial、Lucida、无衬线字体；
字体大小：30px；
盒影：无；
边界：无；
}
输入。购买：悬停{
背景色：rgb（74109130）！重要；
}
捐赠{
颜色：白色；
背景#a50b0b；
填充：10px 30px 10px 30px；
字体系列：“Cairo”、Helvetica、Arial、Lucida、无衬线字体；
字体大小：30px；
盒影：无；
边界：无；
}
输入。捐赠：悬停{
背景色：rgb（74109130）！重要；
}

购买



捐赠
您必须提供两个不同的函数名


函数showShirtDiv（）{
document.getElementById（'shirt-form'）.style.display=“block”；
}
函数showDonateDiv（）{
document.getElementById（'generate-form'）.style.display=“block”；
}
input.buy{
颜色：白色；
背景#a50b0b；
填充：10px 30px 10px 30px；
字体系列：“Cairo”、Helvetica、Arial、Lucida、无衬线字体；
字体大小：30px；
盒影：无；
边界：无；
}
输入。购买：悬停{
背景色：rgb（74109130）！重要；
}
捐赠{
颜色：白色；
背景#a50b0b；
填充：10px 30px 10px 30px；
字体系列：“Cairo”、Helvetica、Arial、Lucida、无衬线字体；
字体大小：30px；
盒影：无；
边界：无；
}
输入。捐赠：悬停{
背景色：rgb（74109130）！重要；
}

购买



另一种解决方案是保留一个函数并将元素id作为参数传递


函数showDiv（id）{
document.getElementById（id）.style.display=“block”；
}

input.buy{
颜色：白色；
背景#a50b0b；
填充：10px 30px 10px 30px；
字体系列：“Cairo”、Helvetica、Arial、Lucida、无衬线字体；
字体大小：30px；
盒影：无；
边界：无；
}
输入。购买：悬停{
背景色：rgb（74109130）！重要；
}
捐赠{
颜色：白色；
背景#a50b0b；
填充：10px 30px 10px 30px；
字体系列：“Cairo”、Helvetica、Arial、Lucida、无衬线字体；
字体大小：30px；
盒影：无；
边界：无；
}
输入。捐赠：悬停{
背景色：rgb（74109130）！重要；
}

购买



另一种解决方案是保留一个函数并将元素id作为参数传递


函数showDiv（id）{
document.getElementById（id）.style.display=“block”；
}

input.buy{
颜色：白色；
背景#a50b0b；
填充：10px 30px 10px 30px；
字体系列：“Cairo”、Helvetica、Arial、Lucida、无衬线字体；
字体大小：30px；
盒影：无；
边界：无；
}
输入。购买：悬停{
背景色：rgb（74109130）！重要；
}
捐赠{
颜色：白色；
背景#a50b0b；
填充：10px 30px 10px 30px；
字体系列：“Cairo”、Helvetica、Arial、Lucida、无衬线字体；
字体大小：30px；
盒影：无；
边界：无；
}
输入。捐赠：悬停{
背景色：rgb（74109130）！重要；
}

购买



捐赠
您不需要多个功能。只需将相应的
id
传递给函数调用：


函数showDiv（elId）{
document.getElementById（elId.style.display=“block”；
}
input.buy{
颜色：白色；
背景#a50b0b；
填充：10px 30px 10px 30px；
字体系列：“Cairo”、Helvetica、Arial、Lucida、无衬线字体；
字体大小：30px；
盒影：无；
边界：无；
}
输入。购买：悬停{
背景色：rgb（74109130）！重要；
}
捐赠{
颜色：白色；
背景#a50b0b；
填充：10px 30px 10px 30px；
字体系列：“Cairo”、Helvetica、Arial、Lucida、无衬线字体；
字体大小：30px；
盒影：无；
边界：无；
}
输入。捐赠：悬停{
背景色：rgb（74109130）！重要；
}

购买



捐赠
您不需要多个功能。只需将相应的
id
传递给函数调用：


f