Javascript 如何在同一页中添加两个签名板

我试图把两个签名字段放在同一个页面上，使用这个演示和代码

如何在同一页中放置两个签名板，每个签名板上有两个可用的清除按钮和一个保存按钮？“保存”按钮应显示一条警告，其中包含一条pad为空的错误消息，或者如果两个pad都已签名，则显示一条成功消息

以下是我现在拥有的（感谢szimek）：

HTML:

JS:

主要补充内容包括：

HTML-为按钮添加元素。它们可以去任何你喜欢的地方，只要确保给它们唯一的ID，因为这是你在JavaScript代码中访问它们的方式

<button id="clear1">Clear</button>
<button id="clear2">Clear</button>
<button id="save">Save</button>

---

看起来您已经在使用jQuery了，所以我用它来设置onclick属性，但当然还有其他方法。

添加按钮并将其事件处理程序设置为为为每个pad调用

signaturePad.clear（）

。对于“保存”按钮，将其功能设置为检查其中一个键盘是否为空，并显示相应的消息。@whrrgarbl但如果我设置了2个签名键盘div，则将“保存”按钮放置在何处？你能帮忙吗？你可以把按钮放在页面上任何你喜欢的地方，从编码的角度看，唯一重要的是它的

onclick

属性触发了你的“保存”功能。

var wrapper1 = document.getElementById("signature-pad-1"),
    canvas1 = wrapper1.querySelector("canvas"),
    signaturePad1;

var wrapper2 = document.getElementById("signature-pad-2"),
    canvas2 = wrapper2.querySelector("canvas"),
    signaturePad2;


function resizeCanvas(canvas) {
    var ratio =  window.devicePixelRatio || 1;
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

resizeCanvas(canvas1);
signaturePad1 = new SignaturePad(canvas1);

resizeCanvas(canvas2);
signaturePad2 = new SignaturePad(canvas2);

<button id="clear1">Clear</button>
<button id="clear2">Clear</button>
<button id="save">Save</button>

function clear1() {
    signaturePad1.clear();
}
function clear2() {
    signaturePad2.clear();
}
function save() {
    if (signaturePad1.isEmpty() || signaturePad2.isEmpty())
        alert("Error: Please sign both pads!");
    else
        alert("Success!");
}

$("#clear1").click(clear1);
$("#clear2").click(clear2);
$("#save").click(save);