Uncaught ReferenceError: deleteNote is not defined at HTMLButtonElement.onclick

so, i just learn about make some website with flask. everything was fine until this error makes me crazy. can u solve my problem?

this is my def function to delete some note

@views.route('/delete-note',methods=['POST']) 
def delete_note():
note = json.loads(request.data)
noteId = note['noteId']
note = Note.query.get(noteId)
if note:
    if note.user_id == current_user.id:
        db.session.delete(noteId)
        db.session.commit()
return jsonify({})

JavaScript
​x
 
@views.route('/delete-note',methods=['POST']) 
def delete_note():
note = json.loads(request.data)
noteId = note['noteId']
note = Note.query.get(noteId)
if note:
    if note.user_id == current_user.id:
        db.session.delete(noteId)
        db.session.commit()
return jsonify({})
​

and this is my .js code

function deleteNote(noteId) {
  fetch("/delete-note", {
    method: "POST",
    body: JSON.stringify({ noteId: noteId }),
  }).then((_res) => {
    window.location.href = "/";
  });
}

JavaScript
 
function deleteNote(noteId) {
  fetch("/delete-note", {
    method: "POST",
    body: JSON.stringify({ noteId: noteId }),
  }).then((_res) => {
    window.location.href = "/";
  });
}
​

and this is how i make the button with html

<ul class="list-group list-group-flush" id="notes">
  {% for note in user.notes %}
  <li class="list-group-item">
    {{ note.data }}
    <button type="button" class="close" onClick="deleteNote({{ note.id }})">
      <span aria-hidden="true">&times;</span>
    </button>
  </li>
  {% endfor %}
</ul>

JavaScript
 
<ul class="list-group list-group-flush" id="notes">
  {% for note in user.notes %}
  <li class="list-group-item">
    {{ note.data }}
    <button type="button" class="close" onClick="deleteNote({{ note.id }})">
      <span aria-hidden="true">&times;</span>
    </button>
  </li>
  {% endfor %}
</ul>
​

can u help me? i dont know how to solve it. please help me

Answer

Are you loading the js file correctly. You can try loading the function before the HTML markup eg

<head>
 <script>
  function deleteNote(noteId) {
  fetch("/delete-note", {
    method: "POST",
    body: JSON.stringify({ noteId: noteId }),
  }).then((_res) => {
    window.location.href = "/";
  });
}</script>
</head>

<body>
<ul class="list-group list-group-flush" id="notes">
 {% for note in user.notes %}
 <li class="list-group-item">
 {{ note.data }}
<button type="button" class="close" onClick="deleteNote({{ note.id }})">
  <span aria-hidden="true">&times;</span>
</button>
</li>
 {% endfor %}
 </ul>
</body>

JavaScript
 
<head>
 <script>
  function deleteNote(noteId) {
  fetch("/delete-note", {
    method: "POST",
    body: JSON.stringify({ noteId: noteId }),
  }).then((_res) => {
    window.location.href = "/";
  });
}</script>
</head>
​
<body>
<ul class="list-group list-group-flush" id="notes">
 {% for note in user.notes %}
 <li class="list-group-item">
 {{ note.data }}
<button type="button" class="close" onClick="deleteNote({{ note.id }})">
  <span aria-hidden="true">&times;</span>
</button>
</li>
 {% endfor %}
 </ul>
</body>
​

Advertisement

Answer