how to call a nested jquery function from html?

Question

I am calling a addtext() function from html onclick() that is nested inside add() function. I want to call the second function. How can i approach this?

Here i have a link with add() function that shows a textbox and an ADD button with addtext(). The add() function checks for text and if text is present, it generates a new text box. Now i want the add button to take that text and from the textbox and set it in replacement of the textbox. clicking the ADD button will take it to addtext() which is inside the add() function.

Html code:

     <a id = "newcard" href="#" onclick="add()" >
            <b style ="color: #444444">Add Card...</b>
     </a>

     <div>
          <span id = "show-ta"><textarea id="txtarea" style =" 
      display:none"></textarea><span>
          <span id = "newbutton"><button id = "firstbutton" class ="btn btn-
      success nbutton"onclick="addtext()" style ="display:none">Add</button>
          </span>
     </div>

Jquery code:

     function add(){
      var newTextBoxDiv = $(document.createElement('textarea'));
      if ( $('#txtarea').css('display') == 'none' ){
    $('#txtarea').css('display', 'block');
       }
      if ( $('#firstbutton').css('display') == 'none' ){
    $('#firstbutton').css('display', 'block');
       }
      var wrapper = $('#show-ta');
      var button = $(document.createElement('button'));

    if(wrapper.find('textarea').last().val().length) {
       var x =wrapper.find('textarea').last().val();
        function addtext()
        {

        }
        wrapper.append('<textarea class="t-one"></textarea>');
        wrapper.append('<button class ="btn btn-success 
   nbutton">Add</button>').appendTo('#cardarea').insertAfter('#cardtitle');;
        //button.addClass("btn btn-success");
        wrapper.appendTo("#cardarea").insertAfter('#cardtitle');
        wrapper.addClass('t-one');
       // var text =$('textarea:nth-last-child(2)').val().length;

        //wrapper.addClass('nbutton');
    }

Answer 1

You have to assign the nested function to a property like this addText.add = add; then you can call that function in onClick event.

function addText()
    {
        // irrelevant code here
        function add(arg){
            console.log( arg );
        }
    
        addText.add = add;
    }
    addText();

<button onclick="addText.add('Nested function')">Click me</button>

EDIT:

Updated the snippet as per your code

function add() {
  var newTextBoxDiv = $(document.createElement('textarea'));
  if ($('#txtarea').css('display') == 'none') {
    $('#txtarea').css('display', 'block');
  }
  if ($('#firstbutton').css('display') == 'none') {
    $('#firstbutton').css('display', 'block');
  }
  var wrapper = $('#show-ta');
  var button = $(document.createElement('button'));

  if (wrapper.find('textarea').last().val().length) {
    var x = wrapper.find('textarea').last().val();

    function addtext() {
      alert('working');
    }
    add.addtext = addtext;
    wrapper.append('<textarea class="t-one"></textarea>');
    wrapper.append('<button class="btn btn-success nbutton ">Add</button>').appendTo('#cardarea').insertAfter('#cardtitle');;

    wrapper.appendTo("#cardarea").insertAfter('#cardtitle');
    wrapper.addClass('t-one');

  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a id="newcard" href="#" onclick="add()">
  <b style="color: #444444">Add Card...</b>
</a>
<div>
  <span id="show-ta">
  <textarea id="txtarea" style ="display:none">
  </textarea>
  </span>
  <span id="newbutton">
  <button id = "firstbutton" class ="btn btn-success nbutton" onclick="add.addtext()" style="display:none">Add
  </button>
</span>
</div>