Dynamically adding a text bullet to a text area

Question

I have a form that is pretty dynamically created based off of a project created in Pageflex Studio. I can add script or HTML elements above the text area and I can add script or HTML elements below the text area but I cannot directly edit the text area HTML.

Essentially, I have a textarea that was dynamically added that I can only target using a JQuery selector. I need to add some sort of functionality to this (either a button the user can press or just by pressing enter) where the user can create a text bullet (so not a bullet created with HTML ul/li).

So I want the final result to look something like this:

I tried using the code found from this answer but had trouble getting it to access the textarea. I'm a bit rusty on my JavaScript so I feel like I'm missing something simple here but just not getting it.

I'm not sure what you mean by "access to the text area". Why does $('textarea') not work? — A F, Nov 14 '18 at 20:32
Could you provide a snippet with the attempt you speak about in the last paragraph, so we see for ourselves what the issue is? — trincot, Nov 14 '18 at 20:35

score 0 · Answer 1 · edited Dec 04 '19 at 13:10

you can change bullet size copy any one [⬤,●,•] and set on the code

$("#btn_add").click(function(){
document.getElementById('todolist').value +='● ' + $("#entryText").val()+"\n";
});

#todolist {width:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder="enter todo value" id="entryText" />
<button id="btn_add">add</button>

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

Dynamically adding a text bullet to a text area

1 Answers1