Question

Hello Friends
I am facing some problem or can say not figure out any help regard this so please help me
There is button having name Add Text when I click that button it display a text box when i enter some text in this text box it display the entered text below.when I click again Add Text button then previous one textbox seems empty i don’t want this.

1.) My requirement is when I click Add Text button second time it doesn’t empty the previous textbox.

2.) when i click the B button then it convert the text to bold.Right now its working for one text i want when i select particular text and click B button it convert the particular selected text to bold.
These are my two problem.Please reply if anybody having the solution of my problem.
Thanks

<script type="text/javascript">
   var i=0;
   function add_input()
        {
          if(i!=6){
              var d=document.getElementById('div');

           d.innerHTML+="<input type='text'  name='addtext"+i+"' id='addtext"+i+"'onkeyup='copy("+i+")'><br></br>";
                 i++;
                 }

        }
  function copy(j){

           var mm = 'addtext'+j;
           var divid = 'newcontent'+j;
           var s1=document.getElementById(mm).value;

           /*var s2=document.getElementById('newcontent'+j);*/
           var s2=document.getElementById('newcontent'+j);

           s2.innerHTML=s1;


            }
          </script>


      <script type="text/javascript">
          function f2() {

               if(document.getElementById('newcontent0').style.fontWeight =='bold')
                    {
                         document.getElementById('newcontent0').style.fontWeight = 'normal';
                    }
                   else if(document.getElementById('newcontent0').style.fontWeight =='normal')
                     {
                        document.getElementById('newcontent0').style.fontWeight = 'bold';
                      }
                  else if(document.getElementById('newcontent0').style.fontWeight =='')
                     {
                        document.getElementById('newcontent0').style.fontWeight = 'bold';
                      }
              }
             </script>

     <input  type="button" value="Add Text" onclick="add_input()"  />
     <input type="button"  value="B"  onclick="f2()"/> 
     <div id="div"></div>
     <div id="newcontent0"  style="padding:0px;margin:0px;"></div>
     <div id="newcontent1"  style="padding:0px;margin:0px;"></div>
     <div id="newcontent2"  style="padding:0px;margin:0px;"></div>
     <div id="newcontent3"  style="padding:0px;margin:0px;"></div>
     <div id="newcontent4"  style="padding:0px;margin:0px;"></div>

Thanks

Answer 1

1.) My requirement is when I click Add Text button second time it doesn’t
empty the previous textbox.

This happens because you replace the innerHTML. Any text you have typed into the input field will not be retained, because it’s not part of the new innerHTML.

To prevent this from happening, you can manipulate the DOM instead. It may be a bit more code and theoretically somewhat slower, but in this case that’s not something you need to worry about.

2.) when i click the B button then it convert the text to bold.Right now its
working for one text i want when i
select particular text and click B
button it convert the particular
selected text to bold.

This one is a little trickier. We need to remember which input field was last selected, so that f2() can set the fontWeight of the correct element. You can do that by using the onblur event of the input elements and having a variable lastFocused remembering which one was last selected.

All in all, something like this should work (try here: http://jsfiddle.net/2euLZ/) :

var i = 0;
var lastFocused = null;

function add_input()
{
    if(i != 6){
        var d=document.getElementById('div');
        var newId    = i;

        var newInput = document.createElement("input");
        newInput.type    = "text";
        newInput.name    = "addtext" + i;
        newInput.id      = "addtext" + i;
        newInput.onkeyup = function() { copy(newId); };
        newInput.onblur  = function() { lastFocused = newId; };

        d.appendChild(newInput);
        d.appendChild(document.createElement("br"));
        i++;
    }
}

function copy(j)
{
       var s1 = document.getElementById('addtext'+j);
       var s2 = document.getElementById('newcontent'+j);
       s2.innerHTML = s1.value;
}

function f2() {
    var target = document.getElementById("newcontent" + lastFocused);

    var newFontWeight = "bold";
    if(target.style.fontWeight == "bold")
        newFontWeight = "normal";

    target.style.fontWeight = newFontWeight;
}