无法检查签名板是否为空

Question

我的签名板有问题。当我按下提交按钮而不在键盘上签名时，我会抛出一个错误，但我收到了这个错误：

未捕获的 ReferenceError：signaturePad 未定义

这是我的代码：

jQuery(document).ready(function () {
  var signaturePadCanvas = document.querySelector('#signature-pad-canvas');
  var parentWidth = jQuery(signaturePadCanvas).parent().outerWidth();
  signaturePadCanvas.setAttribute("width", parentWidth);
  var signaturePad = new SignaturePad(signaturePadCanvas);
});

function submit() {
  if (signaturePad.isEmpty()) {
    console.log("Empty!");
  }
}

.signature-pad-canvas-wrapper {
    margin: 15px 0 0;
    border: 1px solid #cbcbcb;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.signature-pad-canvas-wrapper::after {
    content: 'Name';
    border-top: 1px solid #cbcbcb;
    color: #cbcbcb;
    width: 100%;
    margin: 0 15px;
    display: inline-flex;
    position: absolute;
    bottom: 10px;
    font-size: 13px;
    z-index: -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<div class="signature-pad-canvas-wrapper">
    <canvas id="signature-pad-canvas"></canvas>
    <button onClick="submit()">Submit</button>
</div>

有任何想法吗？

Answer 1

Your signaturePad variable is out of scope for submit() function, declare it at global scope and then use it.

var signaturePad;
jQuery(document).ready(function () {
  var signaturePadCanvas = document.querySelector('#signature-pad-canvas');
  var parentWidth = jQuery(signaturePadCanvas).parent().outerWidth();
  signaturePadCanvas.setAttribute("width", parentWidth);
  signaturePad = new SignaturePad(signaturePadCanvas);
});

function submit() {
  if (signaturePad.isEmpty()) {
    console.log("Empty!");
  }
}

.signature-pad-canvas-wrapper {
    margin: 15px 0 0;
    border: 1px solid #cbcbcb;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.signature-pad-canvas-wrapper::after {
    content: 'Name';
    border-top: 1px solid #cbcbcb;
    color: #cbcbcb;
    width: 100%;
    margin: 0 15px;
    display: inline-flex;
    position: absolute;
    bottom: 10px;
    font-size: 13px;
    z-index: -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<div class="signature-pad-canvas-wrapper">
    <canvas id="signature-pad-canvas"></canvas>
    <button onClick="submit()">Submit</button>
</div>