Question: I need to add a `'%'` symbol to the values entered into an input field. How can I do this using javascript only (**not using jquery or other libs**). 

Example: 

When I type "34" in the input field it should appear as "34%". Below is my input field sample:

```
<input type="text"  id="amountId" onkeydown="change(event)" />

```

Answer: 
With a text field, that's relatively easy:

```js
var input = document.getElementById('amountId');

input.addEventListener('blur', function () { // as soon as the input element loses focus, "%" is appended
  input.value += '%';
});
```

```html
<input type="text" id="amountId" />
```

However, there are a few things to note:

* It's not very user-friendly (if the user wants to change the value from 34 to 35, he or she has to delete the `%` character).
* If the user inputs non-numeric values (`foobar`), `%` also is appended.

For these reasons, I would just use a `<input type="number">`:

```html
<input type="number" min="0" max="100">%
```
I was able to come up with a solution by extensive use of `event.preventDefault()` to prevent non-numberic character from printing and re-rendering the value in each key down.The number part of the value is parsed first and I append the pressed key value and % symbol at the end of the string. Sorry I can't share the full solution because it's logic is customized further for my specific usecase.