ondragstart Event Not Firing

I have 3 buttons and I want to see a message when I drag or click or end dragging them, but I'm so confused with the firing of the events.
Let me show you an example:

function click(event){
    event.preventDefault();
    /*
    lastwordchoosed = "";
    isindrag = true;
    */
    //lastwordchoosed += document.getElementById(id).innerHTML;
    console.log("you started dragging");
}
function over(event){
    event.preventDefault();
    console.log("you go on a button")
        //lastwordchoosed += document.getElementById(id).innerHTML;
        debugger;
}
function up(event){
    event.preventDefault();
    console.log("you stopped dragging");
        //lastwordchoosed += document.getElementById(id).innerHTML
        debugger;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p draggable="true" id="b1" ondragstart="click(event)" ondragover="over(event)" ondragend="up(event)" style="font-size: 30pt;">a</p>
    <p draggable="true" id="b2" ondragstart="click(event)" ondragover="over(event)" ondragend="up(event)" style="font-size: 30pt;">z</p>
    <p draggable="true" id="b3" ondragstart="click(event)" ondragover="over(event)" onmouseup="up(event)" style="font-size: 30pt;">b</p>
    <p id="demo"></p>
</body>
<script src="index.js"></script>
</html>

The dragstart event doesn't work and when I start dragging on an element, it doesn't say "you started dragging". Why?

Solution

click() is an in-built function of JavaScript's button object. That's why function click(event) is not working. You need to change the function name.

function click1(event){
    event.preventDefault();
    /*
    lastwordchoosed = "";
    isindrag = true;
    */
    //lastwordchoosed += document.getElementById(id).innerHTML;
    console.log("you started dragging");
}
function over(event){
    event.preventDefault();
    console.log("you go on a button")
        //lastwordchoosed += document.getElementById(id).innerHTML;
        debugger;
}
function up(event){
    event.preventDefault();
    console.log("you stopped dragging");
        //lastwordchoosed += document.getElementById(id).innerHTML
        debugger;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p draggable="true"  id="b1" ondragstart="click1(event)" ondragover="over(event)" ondragend="up(event)" style="font-size: 30pt;">a</p>
    <p draggable="true"  id="b2" ondragstart="click1(event)" ondragover="over(event)" ondragend="up(event)" style="font-size: 30pt;">z</p>
    <p draggable="true" id="b3" ondragstart="click1(event)" ondragover="over(event)" onmouseup="up(event)" style="font-size: 30pt;">b</p>'
 

    <p id="demo"></p>
</body>
<script src="index.js"></script>
</html>