Question: Got some js animated dots that work fine as text,

```
var dots = 0;

$(document).ready(function()
{
    setInterval (type, 600);
});

function type()
{
    if(dots < 3)
    {
        $('#dots').append('.');
        dots++;
    }
    else
    {
        $('#dots').html('');
        dots = 0;
    }
}

```

but can not use it in the VALUE attribute of my input button (after "processing").

```
<input type="button" value="Pay" onClick="this.disabled=true; this.value='Processing'">

```

How to insert it in the right way?
<http://jsfiddle.net/te58dadw/2/>

Answer: 
in jQuery use `.attr('value', '.....')` or `.val()`

```js
var dots = 0;

$(document).ready(function() {
  $('#payDots').on('click', function() {
    $(this).attr('disabled', 'disabled');
    setInterval(type, 600);
  })

});

function type() {
  var dot = '.';
  if(dots < 3) {
    $('#payDots').val('processing' + dot.repeat(dots));
    dots++;
  }
  else {
    $('#payDots').val('processing');
    dots = 0;
  }
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="payDots" type="button" value="Pay">
```
`<input>` element does not have `.innerHTML` property which is displayed. `.append()` and `.html()` set an elements' `.innerHTML` property, not `.value` property. 

`<input>` element has `.value` property which can be set at jQuery using `.val(function)`

```js
var dots = 0;
var dot = ".";

$(document).ready(function() {
  setInterval(type, 600);
});

function type() {
  if (dots < 3) {
    $('input').val(function(i, val) {
      return val + dot
    });
    dot.concat(".");
    dots++;
  } else {
    $('input').val("Pay");
    dots = 0;
    dot = "."
  }
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HERE IT WORKS
<div>processing<span id="dots"></span></div>
<BR>
<BR> HERE IT DOESN"T
<BR>
<input type="button" value="Pay" onClick="this.disabled=true; this.value='Processing'">
```