署名が2つ追加されない。

Question

これは単純なJqueryまたはJavascriptの問題です。 1つの署名を追加するとうまくいきますが、同じページの2番目の署名が機能していません。エラーを修正してください。

私はコードを繰り返し

var wrapper = document.getElementById("signature-pad1"), 
 
    clearButton = wrapper.querySelector("[data-action=clear]"), 
 
    saveButton = wrapper.querySelector("[data-action=save]"), 
 
    canvas = wrapper.querySelector("canvas"), 
 
    signaturePad; 
 

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

 
window.onresize = resizeCanvas; 
 
resizeCanvas(); 
 

 
signaturePad = new SignaturePad(canvas); 
 

 
clearButton.addEventListener("click", function(event) { 
 
    signaturePad.clear(); 
 
}); 
 

 
saveButton.addEventListener("click", function(event) { 
 
    if (signaturePad.isEmpty()) { 
 
    alert("Please provide signature first."); 
 
    } else { 
 
    window.open(signaturePad.toDataURL()); 
 
    } 
 
}); 
 

 
// second signature

.m-signature-pad { 
 
    position: relative; 
 
    font-size: 10px; 
 
    width: 500px; 
 
    height: 250px; 
 
    margin-top: 30px; 
 
    margin-left: 10px; 
 
    border: 1px solid #909090; 
 
    background-color: #fff; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset; 
 
    border-radius: 4px; 
 
} 
 
.m-signature-pad:before, 
 
.m-signature-pad:after { 
 
    position: absolute; 
 
    z-index: -1; 
 
    content: ""; 
 
    width: 40%; 
 
    height: 10px; 
 
    left: 20px; 
 
    bottom: 10px; 
 
    background: transparent; 
 
    -webkit-transform: skew(-3deg) rotate(-3deg); 
 
    -moz-transform: skew(-3deg) rotate(-3deg); 
 
    -ms-transform: skew(-3deg) rotate(-3deg); 
 
    -o-transform: skew(-3deg) rotate(-3deg); 
 
    transform: skew(-3deg) rotate(-3deg); 
 
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4); 
 
} 
 
.m-signature-pad:after { 
 
    left: auto; 
 
    right: 20px; 
 
    -webkit-transform: skew(3deg) rotate(3deg); 
 
    -moz-transform: skew(3deg) rotate(3deg); 
 
    -ms-transform: skew(3deg) rotate(3deg); 
 
    -o-transform: skew(3deg) rotate(3deg); 
 
    transform: skew(3deg) rotate(3deg); 
 
} 
 
.m-signature-pad--body { 
 
    position: absolute; 
 
    left: 20px; 
 
    right: 20px; 
 
    top: 20px; 
 
    bottom: 60px; 
 
    border: 1px solid #606060; 
 
} 
 
.m-signature-pad--body canvas { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 4px; 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset; 
 
} 
 
.m-signature-pad--footer { 
 
    position: absolute; 
 
    left: 20px; 
 
    right: 20px; 
 
    bottom: 20px; 
 
    height: 40px; 
 
} 
 
.m-signature-pad--footer .description { 
 
    color: #C3C3C3; 
 
    text-align: center; 
 
    font-size: 1.2em; 
 
    margin-top: 1.8em; 
 
} 
 
.m-signature-pad--footer .button { 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 
.m-signature-pad--footer .button.clear { 
 
    left: 0; 
 
} 
 
.m-signature-pad--footer .button.save { 
 
    right: 0; 
 
} 
 
@media screen and (max-width: 1024px) { 
 
    .m-signature-pad { 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    width: auto; 
 
    height: auto; 
 
    min-width: 250px; 
 
    min-height: 140px; 
 
    margin: 5%; 
 
    } 
 
    #github { 
 
    display: none; 
 
    } 
 
} 
 
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
 
    .m-signature-pad { 
 
    margin: 10%; 
 
    } 
 
} 
 
@media screen and (max-height: 320px) { 
 
    .m-signature-pad--body { 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 32px; 
 
    } 
 
    .m-signature-pad--footer { 
 
    left: 20px; 
 
    right: 20px; 
 
    bottom: 4px; 
 
    height: 28px; 
 
    } 
 
    .m-signature-pad--footer .description { 
 
    font-size: 1em; 
 
    margin-top: 1em; 
 
    } 
 
} 
 
.red { 
 
    color: #fa0312; 
 
} 
 
.normal-color { 
 
    color: #202020; 
 
} 
 
.signs-box { 
 
    padding: 1px 10px 10px 20px; 
 
    border: 1px solid #D8D8D8; 
 
} 
 
.signs-box h3 { 
 
    display: block; 
 
    font-size: 14px; 
 
    text-transform: uppercase!important; 
 
} 
 
.signs-box img { 
 
    max-width: 100%; 
 
} 
 
#progress-bar { 
 
    z-index: 8888888888888888!important; 
 
    top: 0px!important; 
 
} 
 
.number-visard { 
 
    padding-bottom: 30px; 
 
}

<script src="http://secure.ascconnect.com/demov4/kiosk/sign/signature_pad.js"></script> 
 
<div id="signature-pad1" class="m-signature-pad"> 
 
    <div class="m-signature-pad--body"> 
 
    <canvas></canvas> 
 
    </div> 
 
    <div class="m-signature-pad--footer"> 
 
    <div class="description">Sign above</div> 
 
    <button type="button" class="button clear" data-action="clear">Clear</button> 
 
    <button type="button" class="button save" data-action="save">Save</button> 
 
    </div> 
 
</div> 
 

 
<hr> 
 

 

 
<div id="signature-pad2" class="m-signature-pad"> 
 
    <div class="m-signature-pad--body"> 
 
    <canvas></canvas> 
 
    </div> 
 
    <div class="m-signature-pad--footer"> 
 
    <div class="description">Sign above</div> 
 
    <button type="button" class="button clear" data-action="clear">Clear</button> 
 
    <button type="button" class="button save" data-action="save">Save</button> 
 
    </div> 
 
</div>

、第2の署名ボックスは動作しますが、最初のボックスにはありません。

Answer 1

以下のようにする必要があります。 -

1. jQueryライブラリを追加します。

2.Changeスクリプトコード以下のように： -

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

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

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

function clear1() { signaturePad1.clear(); } 
function clear2() { signaturePad2.clear(); } 

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

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

$("#signature-pad1 .clear").click(clear1); 
$("#signature-pad2 .clear").click(clear2); 

の作業フィドル： - https://jsfiddle.net/7bfzunnn/