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');
    }

Please add your sample code in your question and give some proper description. — Yogesh Patel
– Yogesh Patel, Commented Jan 5, 2018 at 6:14
Why do you need to encapsulate addtext()? Surely you can just move addtext() outside of the add function? function add() { .... } function addtext() { .... } — Harry
– Harry, Commented Jan 5, 2018 at 6:29

Sankar · Accepted Answer · 2018-01-05 07:03:44Z

2

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>

edited Jan 5, 2018 at 7:03

answered Jan 5, 2018 at 6:15

Sankar

7,1772 gold badges36 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

sanjana Over a year ago

i did the same and i get add.addtext is not a function error :(

Sankar Over a year ago

did you call the function add before the click happens? then only this assign will happen addText.add = add;

Sankar Over a year ago

@Chri.s You need the change the Load type to No wrap in head in JsFiddle.

Sankar Over a year ago

@Chri.s I'm waiting for her response to my previous comment.

Sankar Over a year ago

@sanjana Can you check it now?

|

Collectives™ on Stack Overflow

how to call a nested jquery function from html?

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related