www.webdeveloper.com
Results 1 to 2 of 2

Thread: Unable to get linebreaks working with the DOM

  1. #1
    Join Date
    Nov 2011
    Posts
    1

    Unable to get linebreaks working with the DOM

    I'm relatively new to javascript and I'm having some issues in adding linebreaks i.e. working <br> tags via DOM manipulation. An example of where I cant get it to work is included in the function code below. The html file the script is used in contains one div with an id of pfield. If its helpful the full program is available at http://www.templeofmick/wumpus3.htm

    Code:
    function printHints() {
    
       var vFlags = [0, 0, 0]; //Wumpus, Pit, bat
       var wFlag = 0; //Use flags to insure each hint isnt printed multiple times
       var pFlag = 0;
       var bFlag = 0;
       var node;
       var i;
       var pbreak = document.createElement("br");
       var turnP = document.createElement("p");
       var idString = ("turn" + turn);
    
       turnP.setAttribute("id", idString);
       document.getElementById("pfield").appendChild(turnP);
    
       for (i = 0; i < 3; i++) {
    
       vFlags = checkRoom(currentMap[currentRoom][i]);
    
       if (vFlags[0] === 1) {
           wFlag = 1;
           }
    
       if (vFlags[1] === 1) {
           pFlag = 1;
           }
    
       if (vFlags[2] === 1) {
           bFlag = 1;
           }
    
       }
    
       node = document.createTextNode("You are in room " + currentRoom + ".");
       document.getElementById(idString).appendChild(node);
    document.getElementById(idString).appendChild(pbreak);
    
       node = document.createTextNode("From here you can travel to room : " + currentMap[currentRoom][0] + "," + currentMap[currentRoom][1] 
    
    + " and " + currentMap[currentRoom][2] + ".");
        document.getElementById(idString).appendChild(node);
       document.getElementById(idString).appendChild(pbreak);
    
       if (wFlag === 1) {
           node = document.createTextNode("The acrid stench of a nearby wumpus fills your delicate nostrils.");
           document.getElementById(idString).appendChild(pbreak);
           document.getElementById(idString).appendChild(node);
    
       }
    
       if (pFlag === 1) {
           node = document.createTextNode("The whistling of the wind indicates that floors are in short supply nearby.");
           document.getElementById(idString).appendChild(pbreak);
           document.getElementById(idString).appendChild(node);
    
       }
    
       if (bFlag === 1) {
           node = document.createTextNode("You can hear the mailicious gossiping of giant bats coming from a nearby room.");
           document.getElementById(idString).appendChild(pbreak);
           document.getElementById(idString).appendChild(node);
    
       }
    
       node = document.createTextNode("What now ? (M)ove or (S)hoot");
       document.getElementById(idString).appendChild(pbreak);
       document.getElementById(idString).appendChild(node);
    
    
    }

  2. #2
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    Line Breaks are not part of the DOM tree, they only serve to format the visible HTML.

    the DOM \r\n equivalent is <br>
    I would say that the better method of outputting text is to stuff it in to a textarea, you then don't need to worry too much about a variable as the textarea in effect will be a variable thats updated with the content, all you need do is RegExp it to see if a string already exists in the text area to avoid duplicates, negates the need for a flag system.

    I would also have all your "Hints" in an array and each hit is an object, eg

    Code:
    hintsData = [ { hint:"The acrid stench of a nearby wumpus fills your delicate nostrils."},
    {hint:"The whistling of the wind indicates that floors are in short supply nearby."},
    {hint:"You can hear the mailicious gossiping of giant bats coming from a nearby room."} ];
    each array element of hintsData is an object, this means you can store more properties in the object that relate to that comment... so hintsData[0].hints will output The acrid stench of a nearby wumpus fills your delicate nostrils.



    Don't know if its the browser or this site but this is the third time I have typed in the QR box and hit the "Go Advanced" to find my post posted...



    As I was saying, a textarea can then be populated with this hint data as well as you then not requiring as many variables and sticking elements that relate to each other in an object will allow you to customize more like being able to add color or type of font face or internal information like which character spoke the line.
    Last edited by JunkMale; 11-26-2011 at 10:29 PM.
    We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
    Code:
    Youre = {
          STILL_not_getting_it:function(){
               alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
          },
          MissingThePoint:function(msg){
                alert("You're missing the point. " + msg);
          }
    }
    Youre.STILL_not_getting_it();

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles