[SOLVED] using this.value as parameter onload?

using this.value as parameter onload?

<!DOCTYPE html>
<html onmouseup="end()">
<head>
    <meta charset="UTF-8">
</head>


<script>
var counter;
var count = 0;

window.onload=function()
{
var x=document.getElementsByClassName('banana')
var i;
for (i = 0; i < x.length; i++)
    {
        x[i].onmousedown = debounce(function()
        {
        start(this.className,this.value);  //////if i put '1' instead of this.value it works
        }, 550);
    }
}


function debounce(a, b)
{
    var timer; 
    return function()
    {
        clearTimeout(timer); 
        timer = setTimeout(function()
        {
            a(); 
        }, b); 
    };
}

function start(clicked_className,cha)
  {
    counter = setInterval(function()
    {
      add(clicked_className,cha);
      count++;
    },90);
  }
  function end()
  {
    clearInterval(counter);
  }

function add(clicked_className,cha)
{
window.document.numeri.outpu.value =
window.document.numeri.outpu.value + cha;


}

</script>

<body>
<form name="numeri">
<input type="text"name="outpu">
<input type="button"id="apple"class="banana"value=" Click & Hold  "onmouseleave="end()">
</form>
</body>

</html>

this.className,this.value I guess the Problem is here since if Im exchanging this.value with '1' it works.

What is wrong with this.value and/or this.className in this situation?

Also is there maybe a more elegant way to add an initial delay on a buttonpress, and then a delay between the iterations?

Solution

In your function this references to window.onload function which doesn't have any value. I guess that you want to use x[i].value instead of this.value.