SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    smth similar to bb code

    Hello, I have a question, how can I make this, when I click on a button ( with javascript function ) it displays one thing, when I click the second time, it dispalys something different? Better to understand it's an image with a letter "B",. When clicked on it, it would put <b> in a textarea. How can I make it to put </b> if click second time? And the if third - again <b> etc... ?

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use a global variable to keep track of whether the <b> tag is open or not:
    Code:
    var boldTagOpen = false;
    
    function clickB() {
    	if( boldTagOpen ) {
    		boldTagOpen = false;
    		document.getElementById("myTextArea").value += "</b>";
    	} else {
    		boldTagOpen = true;
    		document.getElementById("myTextArea").value += "<b>";
    	}
    }
    Now - what happens if they click the button to get a <b> and then they type </b> manually, it all screws up. Something to think about.

  3. #3
    SitePoint Addict
    Join Date
    May 2006
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There isn't any problem if I click the button, and then type something, because I will only use this form Right now I have this kind of script:

    Code:
    <html>
    <head>
    <title>123</title>
    <script type="text/javascript">
      var clicked = 0; 
      var clicked2 = 0; 
    
         
        function addBoldTag(){ 
            var tArea = document.forms["myForm"].myTextArea; 
             
            clicked++; 
             
            var tag = (clicked % 2 != 0) ? "<b>" : "</b>"; 
            tArea.value += tag; 
        } 
    	
    	    function addItalicTag(){ 
            var tArea = document.forms["myForm"].myTextArea; 
             
            clicked2++; 
             
            var tag2 = (clicked2 % 2 != 0) ? "<i>" : "</i>"; 
            tArea.value += tag2; 
        } 
    
    
    </script>
    </head>
    
    <body>
    <form name="myForm">
    <img value="bold" src="bold.gif" onclick="addBoldTag()" />
    <img value="italic" src="italic.gif" onclick="addItalicTag()" /><br />
    <textarea name="myTextArea" cols="30" rows="10"></textarea>
    </form>
    </body>
    </html>
    I have only 1 question. How can I put the tags, where my cursor is, not at the end of all the text?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •