Why is there an error in the operation of the virtual BackSpace key?

Question

JavaScript

An error occurs in the virtual key robot, which should delete one character at a time when pressed

. Here is the key code:

$(document).ready(function() {

     function del() {

         function del() {

             var str = document.getElementById('phone').val;

             document.getElementById('phone').val = str.substring(0, str.length - 1);

         }

     }

 });

Here is the complete code: jsfiddle.net/0xL0fctq/60

Answer 1

working code here: https://jsfiddle.net/0xL0fctq/89/
but I commented out the line $("#phone").mask(mask, {placeholder: "_", autoclear: false}); because it didn't work
In the fidler settings, it was necessary NOT to select onLoad, but simply No-wrap in head or No-wrap in body
The html code did not see the del function.
But this is not enough.

$(document).ready(function() {

     function del() {

         function del() {

             var str = document.getElementById('phone').val;

             document.getElementById('phone').val = str.substring(0, str.length - 1);

         }

     }

 });

Here, firstly, the upper del function will be visible only inside function() {},
but it will not do anything, but simply define another del function inside itself.
So the del function should be written like this:

function del() {
   var str = document.getElementById('phone').val;
   document.getElementById('phone').val = str.substring(0, str.length - 1);
}

and pull it to the very top so that it can be called from html.
But not ,
and
in general, if we use Jquery, then we can do this:

var str = $('#phone).val();
$('#phone').val(str.substring(0, str.length - 1));

And there another script is not loaded, and the script fell. I turned it off.
It didn't connect because the fiddler opens via https, while the script connects via http.