CODEWITHSUNDEEP
javascripthtmlcdn
Langutang
Langutang

Reputation: 43

Why am I having an error connecting javascript to simple html?

I am attempting to connect szimek's signature pad to my simple html document. I am testing out the program but cannot get it working in my atom text editor:

html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
      "https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"
    </script>

  </head>
  <h1>
  Please Sign
</h1>
<div class="wrapper">

  <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</div>
<div>
  <button id="save">Save</button>
  <button id="clear">Clear</button>
</div>

  <script src="script.js"></script>
  </body>
</html>

script.js

var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
  backgroundColor: 'rgba(255, 255, 255, 0)',
  penColor: 'rgb(0, 0, 0)'
});
var saveButton = document.getElementById('save');
var cancelButton = document.getElementById('clear');

saveButton.addEventListener('click', function (event) {
  var data = signaturePad.toDataURL('image/png');

// Send data to server instead...
  window.open(data);
});

cancelButton.addEventListener('click', function (event) {
  signaturePad.clear();
});

I have put the same code into js fiddle, and the project works fine. I am connecting through a CDN, and the error I am getting in my own project's inspection is:

script.js:1 Uncaught ReferenceError: SignaturePad is not defined
    at script.js:1

Upvotes: 1

Views: 177

Answers (3)

Jonathan van de Groep
Jonathan van de Groep

Reputation: 385

Instead of:

<script type="text/javascript">
    "https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"
</script>

Use:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"></script>

Upvotes: 2

t.niese
t.niese

Reputation: 40882

<script type="text/javascript">
  "https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"
</script>

Does not load the script https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js it is a script containing the string "https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"></script>

Upvotes: 3

user47589
user47589

Reputation:

Your script tag is wrong.

<script type="text/javascript">
      JS CODE
</script>

This tag is used to include JS code in your page. The line JS CODE is intended to be the code. If you want to pull in an external script, the above code is not the right way to do that.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js">
</script>

The key here is your script tag needs to specify the location where your browser can find the script. It does this using the src attribute on the script tag. As you currently have it, you have some code containing a single string, which doesn't do much.

Upvotes: 2

Related Questions