Removing inline JS

JavaScript
1

I am trying to remove the last vestiges of inline JS on one of my sites. I’m part-way there but the image is being deleted whether I reply yes or no to the confirm(). I’m sure there’s something simple I’m doing wrong.

Original code:

<!doctype html>
<html lang="en-GB">
<head>
<title>List uploaded images - website Admin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main>
  <h1>Website admin</h1>
  <h2>List uploaded images</h2>
  <p class="listImg"><img src="../uploaded-imgs/chapel2.jpg" width="120">chapel2.jpg - <a href="delete-file.php?f=chapel2.jpg&amp;d=uploaded-imgs" onclick="return areYouSure();">delete file</a></p>
  <p class="listImg"><img src="../uploaded-imgs/christmas.jpg" width="120">christmas.jpg - <a href="delete-file.php?f=christmas.jpg&amp;d=uploaded-imgs" onclick="return areYouSure();">delete file</a></p>
  <p class="listImg"><img src="../uploaded-imgs/fete.jpg" width="120">fete.jpg - <a href="delete-file.php?f=fete.jpg&amp;d=uploaded-imgs" onclick="return areYouSure();">delete file</a></p>
  <p class="listImg"><img src="../uploaded-imgs/fireworks.jpg" width="120">fireworks.jpg - <a href="delete-file.php?f=fireworks.jpg&amp;d=uploaded-imgs" onclick="return areYouSure();">delete file</a></p>
  <p>Total 4 images.</p>
  <hr>
  <script>
  function areYouSure() {
    if (confirm("Delete entry - Are you sure?"))
      return true;
    else
      return false;
  }
  </script>
</main>
</body>
</html>

Modified (part-working) code:

<!doctype html>
<html lang="en-GB">
<head>
<title>List uploaded images - website Admin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main>
  <h1>Website admin</h1>
  <h2>List uploaded images</h2>
  <p class="listImg"><img src="../uploaded-imgs/chapel2.jpg" width="120">chapel2.jpg - <a href="delete-file.php?f=chapel2.jpg&amp;d=uploaded-imgs">delete file</a></p>
  <p class="listImg"><img src="../uploaded-imgs/christmas.jpg" width="120">christmas.jpg - <a href="delete-file.php?f=christmas.jpg&amp;d=uploaded-imgs">delete file</a></p>
  <p class="listImg"><img src="../uploaded-imgs/fete.jpg" width="120">fete.jpg - <a href="delete-file.php?f=fete.jpg&amp;d=uploaded-imgs">delete file</a></p>
  <p class="listImg"><img src="../uploaded-imgs/fireworks.jpg" width="120">fireworks.jpg - <a href="delete-file.php?f=fireworks.jpg&amp;d=uploaded-imgs">delete file</a></p>
  <p>Total 4 images.</p>
  <hr>
  <script>
  const i = document.querySelectorAll(".listImg > a");
  const imgs = Array.from(i);
  for (let c = 0; c < imgs.length; c++) {
    imgs[c].addEventListener("click", function() {
      if (confirm("Delete entry - Are you sure?"))
        return true;
      else
        imgs[c].preventDefault();
    });
  }
  </script>
</main>
</body>
</html>
2

preventDefault() is event method. That means…

'click', function(e)
{
    //something

    e.preventDefault();
}
1 Like
3

Thanks @igor_g. That fixed it.

One small problem, I wanted this to work on other pages as well which don’t have the listImg class - der! - so I have added a class to the anchor tag and changed the JS just a tad, but now it deletes the file without even confirming.

<!doctype html>
<html lang="en-GB">
<head>
<title>List uploaded images - Admin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main>
 <h1>Website admin</h1>
 <h2>List uploaded images</h2>
 <p class="listImg"><img src="../uploaded-imgs/chapel2.jpg" width="120">chapel2.jpg - <a class="delfile" href="delete-file.php?f=chapel2.jpg&amp;d=uploaded-imgs">delete file</a></p>
 <p class="listImg"><img src="../uploaded-imgs/christmas.jpg" width="120">christmas.jpg - <a class="delfile" href="delete-file.php?f=christmas.jpg&amp;d=uploaded-imgs">delete file</a></p>
 <p class="listImg"><img src="../uploaded-imgs/fete.jpg" width="120">fete.jpg - <a class="delfile" href="delete-file.php?f=fete.jpg&amp;d=uploaded-imgs">delete file</a></p>
 <p class="listImg"><img src="../uploaded-imgs/fireworks.jpg" width="120">fireworks.jpg - <a class="delfile" href="delete-file.php?f=fireworks.jpg&amp;d=uploaded-imgs">delete file</a></p>
 <p>Total 4 images.</p>
 <hr>
 <script>
 const dfs = document.getElementsByClassName("delfiles");
 for (let c = 0; c < dfs.length; c++) {
   dfs[c].addEventListener("click", function(e) {
     if (confirm("Delete entry - Are you sure?"))
       return true;
     else
       e.preventDefault();
   });
 }
 </script>
</main>
</body>
</html>

Update: Just clicked why this is happening. Aside from a typo. I’m thinking I might just add the delfile class the the p element and revert to the previous JS code (changing the querySelectorAll.

4

Compare your const dfs to the HTML you are trying to grab :slight_smile: . The class, specifically.

Edit - I just saw your edit.

1 Like
5

Fixing the typo was enough. Cheers.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.