How Can I Show A Dynamically Generated Textarea On Button Click Using Knockout Js?

I want to show a text area based on a button click. Pretty simple, but the textarea and button are dynamically generated using Knockout js. My current code works, except it only ex

Solution 1:

I would try creating 2 properties on the project model, 'show' and 'toggleTextArea':

<!-- ko foreach: projects --><divid="eachOppyProject"style="border-bottom: 1px solid #eee;"><table><tbody><tr><td><adata-bind="attr: { href: '/tools/oppy/' + guid }"style="font-size: 25px;"><spanclass="link"data-bind="    value: guid, text: name"></span></a></td></tr><trdata-bind="text: projectDescription"></tr><trdata-bind="text: guid"></tr></tbody></table><spanclass="forminputtitle">Have you done project this before?</span><inputtype="button"id="oppyBtn"class="btnOppy"value="Yes"data-bind="click: toggleTextArea" /><textareaid="oppyDoneTextArea"placeholder="Tell us a little of what you've done."style="height:75px;"data-bind="visible: show" /><br /></div><!-- /ko -->

your project model could be something like this:

var project = function(){
    varself = this;
    self.show = ko.observable(false);
    self.toggleTextArea= function(){
        self.show(!self.show());
    };
}; 

This allows the click of the button to toggle the status of the textarea.

Solution 2:

I think you ca try this to get the result.

HTML (the button and textarea are the last two controls):

<!-- ko foreach: projects --><divid="eachOppyProject"style="border-bottom: 1px solid #eee;"><table><tbody><tr><td><adata-bind="attr: { href: '/tools/oppy/' + guid }"style="font-size: 25px;"><spanclass="link"data-bind="    value: guid, text: name"></span></a></td></tr><trdata-bind="text: projectDescription"></tr><trdata-bind="text: guid"></tr></tbody></table><spanclass="forminputtitle">Have you done project this before?</span><inputtype="button"id="oppyBtn"class="btnOppy"onclick="displayTextArea(this)"value="Yes" /><textareaid="oppyDoneTextArea"placeholder="Tell us a little of what you've done."style=" display:none; height:75px; " /><br /></div><!-- /ko -->

JavaScript:

functiondisplayTextArea(element) {
    var my_disply = element.nextSiblingif (my_disply == "block")
        document.getElementById('oppyDoneTextArea').style.display = "none";
    elsedocument.getElementById('oppyDoneTextArea').style.display = "block";
}

Hope it will help you and will work only when the textarea is the next sibling to button on clicking of which you have to show the textarea