I want to add a bullet point when i click 'enter' button inside textarea. Here is the coding. It did not function at all. Am i wrong?

<script>
$(".todolist").focus(function() {
    if(document.getElementById('todolist').value === ''){
        document.getElementById('todolist').value +='• ';
    }
});

$(".todolist").keyup(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13')
{
    document.getElementById('todolist').value +='• ';
}
var txtval = document.getElementById('todolist').value;
if(txtval.substr(txtval.length - 1) == '\n')
{
    document.getElementById('todolist').value = txtval.substring(0,txtval.length - 1);
    }
});
</script>


<form>
<textarea id="todolist" class="todolist" name="todolist" rows="10"   placeholder="Maintain your pending tasks"></textarea>
</form>

I want to add a bullet point when i click 'enter' button inside textarea. Here is the coding. It did not function at all. Am i wrong?

<script>
$(".todolist").focus(function() {
    if(document.getElementById('todolist').value === ''){
        document.getElementById('todolist').value +='• ';
    }
});

$(".todolist").keyup(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13')
{
    document.getElementById('todolist').value +='• ';
}
var txtval = document.getElementById('todolist').value;
if(txtval.substr(txtval.length - 1) == '\n')
{
    document.getElementById('todolist').value = txtval.substring(0,txtval.length - 1);
    }
});
</script>


<form>
<textarea id="todolist" class="todolist" name="todolist" rows="10"   placeholder="Maintain your pending tasks"></textarea>
</form>

• javascript
• jquery
• html

• May be you can use tinyMCE – Cyril Cherian Commented May 27, 2016 at 9:07
• it works fine to me~ do you load your javascript after the dom tree – twxia Commented May 27, 2016 at 9:12
• load javascript after dom tree?what is that?can explain in details? – David Commented May 27, 2016 at 9:20
• 2 Your code is placed before the form, so it is being executed before form is loaded. Place the code below the form or make it work only after the page is loaded. – Alexiy Commented May 27, 2016 at 9:30

3 Answers 3

Here is the code included in the question adding a bullet point inside text area when clicking enter.

Two things that you might need to change:

1) As mentioned by @Alexiy in the ments, the html code needs to e before the javascript code acting on it, unless that javascript is set to run after the document finishes loading.

2) Make sure you are loading jquery on the page before the javascript because you are using jquery within your javascript.

$(".todolist").focus(function() {
  if (document.getElementById('todolist').value === '') {
    document.getElementById('todolist').value += '• ';
  }
});

$(".todolist").keyup(function(event) {
  var keycode = (event.keyCode ? event.keyCode : event.which);
  if (keycode == '13') {
    document.getElementById('todolist').value += '• ';
  }
  var txtval = document.getElementById('todolist').value;
  if (txtval.substr(txtval.length - 1) == '\n') {
    document.getElementById('todolist').value = txtval.substring(0, txtval.length - 1);
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <textarea id="todolist" class="todolist" name="todolist" rows="10" placeholder="Maintain your pending tasks"></textarea>
</form>

As others have mentioned in their ments, the issue with the code you are using is, that you are loading the script BEFORE the browser gets to the HTML code.

One possible overe is to wrap your entire jQuery code into $(document).ready() or one of it's shortened versions.

However, I would remend not using the <textarea></textarea> element for this purpose, but using the unordered list <ul></ul>. To be able to edit it, you can wrap it in a div with contenteditable value set to true. So to start off with a single empty bullet, use this HTML (no javascript required!)

<div contenteditable="true">
  <ul>
    <li></li>
  </ul>
</div>

you can try this. Javascript

$(document).ready(function(){   
$('#txt').keyup(function(e){
if(e.keyCode == 13){
var h= $('#txt').val();
$('#txt').val('');
$('#txt').val(h+'*');// put your ascii code for special character
}
});
});

html:

<textarea id="txt"></textarea>