JavaScript - 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); } Similar TutorialsI'm having trouble with the way my textarea is displaying text when it's submitted. It always comes out as one line of text instead of the way a user has entered it. Here's my code. Code: <textarea name="info" value="" rows="7" cols="55"> Enter Your Personal Information Here </textarea><br /><br /> That is then called to a function which displays it in a new page. Code: <script> function buildResume() { resInfo = document.myResume.info.value flyWindow = window.open() flyWindow.document.write("Personal Information " + resInfo); } </script> If any knows how I could fix this it'd really help. I've tried using the pre element and wrap property with no luck. Hi all! I created a form where users are allowed to delete a specific row of data by clicking the "cancel" button from the drop down menu. However, I have a problem deleting my data using the javascript. Apparently, I only able to delete the first row of the data but not for the rest! The following is the code i have: PHP Code: <html> <body style="background-color:#E0FFFF;"> <script language="javascript" > <!-- hide function submitRequest(val) { document.forms[0].submit(); } // end hide --> </script> <?php $con = mysql_connect("localhost","root",""); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("my_course", $con); $result = mysql_query("SELECT * FROM Courses ORDER BY Year, Sem, CourseCode"); $result1 = mysql_query("SELECT * FROM Courses ORDER BY Year, Sem, CourseCode"); echo "<table border='1' cellpadding='2' cellspacing='0'> <tr> <th>CourseCode</th> <th>CourseName</th> <th>Year</th> <th>Sem</th> <th>Grade</th> <th>Option</th> </tr>"; ?> <?php while($row = mysql_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['CourseCode'] . "</td>"; echo "<td>" . $row['CourseName'] . "</td>"; echo "<td>" . $row['Year'] . "</td>"; echo "<td>" . $row['Sem'] . "</td>"; echo "<td>" . $row['Grade'] . "</td>"; echo "<td>"; ?> <?php ?> <form name="form1" action="submitDelete.php" method="post"> <select name="cancel" onchange="submitRequest(this.value);"> <option value=> </option> <option value="<?php echo $row['CourseName'];?>">Cancel</option> </select> </form> <?php echo "</td>"; echo "</tr>"; } echo "</table>"; mysql_close($con); ?> <br/> <br/> </body> </html> Thanks in advance! Hi guys, My brain is not working. May be I need a coffee break. I need your expertise. Below is the code holding the textarea. Look for the element with the id : themessage Code: <table width="100%" border="0"> <tr><td rowspan="4"><input type="button" name="send_email" id="send_email" style="height:50px; width:100px;" value="SEND" onClick="return err_check();" /></td><td><span class="que">From : </span></td><td colspan="3"><?php echo $from_email; ?><input type="hidden" name="from_mail" id="from_mail" value="<?php echo $from_email;?>"/><input type="hidden" name="camp_id" id="camp_id" value="<?php echo $camp_id;?>"/></td></tr> <tr><td><span class="que">To : </span></td><td colspan="3"><input name="to_email" id="to_email" style="width:250px;" /></td></tr> <tr><td><span class="que">CC : </span></td><td colspan="3"><input name="cc_email" id="cc_email" style="width:250px;"/></td></tr> <tr><td><span class="que">Subject : </span></td><td colspan="3"><input style="width:300px;" name="subject" id="subject" /></td></tr> <tr><td rowspan="1" colspan="2"> </td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" /> PDF Quotation</td><td> </td><td> </td></tr><tr><td colspan="2"><span class="que">Credit Application</span></td><td><input type="checkbox" name="corporate" id="corporate"/>Corporate</td><td><input type="checkbox" name="individual" id="individual" />Individual</td><td><input type="checkbox" name="cash" id="cash" />Cash Account</td> </tr> <tr> <td colspan="2" rowspan="3"></td><td><input type="checkbox" name="tabloid" id="tabloid" />Tabloid Example</td> <td><input type="checkbox" name="broadsheet" id="broadsheet" />Broadsheet Example</td></tr> <tr><td><input type="checkbox" name="colmt" id="colmt" />Column Sizes Tabloid</td> <td><input type="checkbox" name="colmb" id="colmb" />Column Sizes Broadsheet</td></tr> <tr><td><input type="checkbox" name="maps" id="maps" />Maps / Distribution</td><td colspan="2" align="right">External Attachments <input id="upload_file" name="upload_file" type="file"/> </td></tr> <tr><td colspan="2"><span class="que">Message :</span></td><td colspan="3"> <textarea id="themessage" name="themessage" rows="15" cols="80" style="width: 100%"> </textarea> </td></tr> </table> Now on a button click, I'm trying to pass some values which one of them happens to be what ever that is entered in the textarea. For some reason, the stupid JS is not reading. But I think it is me that is stupid, not JS. Below is the code i'm running to get the value. Code: var message = document.getElementById('themessage').value; alert(message); The alert simply returns blank. There is an alert, but no value even where there is text in the text area. Can someone please shed some light on this. pretty please I am restarting a thread because as a result of acting on all of the suggestions I have received the nature of the issue has changed. I am trying to create a button and add it to the DOM under IE7. The code works fine under Firefox: Code: var editButton = document.createElement("button"); editButton.name = "editCitation" + rowNum; try { editButton.type = 'button'; } catch(e) { // IE7 throws this exception alert("citTable.js: gotAddCit: unable to set type for <button name='editCitation" + rowNum + "' type=" + editButton.type); } editButton.onclick = editCitation; editButton.appendChild(document.createTextNode('Edit Citation')); td1.appendChild(editButton); I am creating a <button> rather than an <input type=button> because a <button> permits HTML in the button label. Most of my buttons support Alt keyboard shortcuts, so I want to underline the appropriate letter in the label. According to the HTML 4.01 specification, which is as close to a standard as IE7 supports, a <button> can be one of three types: submit, reset, or button, and the default is submit. Since I wish to create a <button type=button> I therefore, at least theoretically, need to be able to set the value of the type attribute. However IE7 throws an exception at that point, although, interestingly, when I interrogate the value of editButton.type in the catch it is set to button. So how do I reliably set the type of a button under IE7? http://jsfiddle.net/FZ44M/3/ Thats my jsfiddle. I'm trying to get the gallerynav to sort the thumbnails based on their class. It does not work at all. I've gone over line by line but I can't see the mistake. When I run JSLink i get the error: Error: Problem at line 37 character 14: Cannot set property 'first' of undefined Implied global: $data 13,14, arr 14,15,25, jQuery 28, $ 30 Unused variable: read_button 30 "$", r 32 "read_button" I appreciate any help. http://www.codetoad.com/javascript/e...rm_element.asp I tried to use the code in the above link but it is not changing the button to enabled. http://realistichostings.com/b/searc...?cat=Adhesives when i change the value in the select i am wanting the 'add' button to become enabled. i get the following erro in eror console.. Error: missing ; before statement Source File: http://realistichostings.com/b/searc...?cat=Adhesives Line: 1, Column: 14 Source Code: document.form1.3552.disabled=false; edit: I further identified the problem. Hi, I'm new to JavaScript and I'm having problem with appending a div node returned from a function. Here's where it crashed: Code: var div=document.getElementById("dashboard_secondary_cat_list"); var s=get_secondary_cat_node(attributes); alert("b4 appendin:"+s); div.appendChild(s); alert("done appendin"); alert("done appendin"); never gets called because the previous line crashes. alert("b4 appendin:"+s); shows: b4 appendin:[object HTMLDivElement] Hello. I'm trying to set up a login formular with PHP and JavaScript/jQuery. Currently it sends an alert box, if some information are wrong. If correct, it refreshes the page, and everyone's happy. However, I noticed upon the first visit, I cannot log in. Lets say I go to www.mysite.com and try to login, it displays a blank alert box, when it's suppose to display the username, that I supplied, and is wrong... however, it's blank. BUT! If I go to another page and login with false informations, an alert box with the wrong username pops up - if I login with correct informations, it works. How come it won't work on first visit? What am I doing wrong here? Pressing F5 won't work either - I have to manually switch to another page for it to work. Any suggestions and ideas are welcome and appreciated. I'll supply the codes necessary for anyone to help me, but at this point I'm completely blank on which of my codes may be the problem. EDIT - IMPORTANT INFORMATION! Now THIS is weird! I just noticed it's because there's not www. in the URL. There has to be www. for it to work, why is this? I forced the client to have www. in the URL with .htaccess, but I'd still like to know, why this problem occurs without it. This is my first time posting, so please let me know if I am doing things as expected. When users click on a "Was this helpful?" link, an e-mail message displays with the page title (accomplished using a JS function). I want to put this is an external file so that it only needs to be updated once. Here's the code in the feedback.js file: Code: function feedback() { mail_str = "mailto:feedback@company?subject=Page Title: " + document.title; mail_str += "&body=Thank you for your input."; location.href = mail_str; } And here's the code in the page: Code: <script src="feedback.js" type="text/javascript"></script> ... Was this topic <a href="javascript:feedback()">helpful?</a> When I do this, an "object expected" error displays. When I put the code inside of the header, it works fine. What gives? I am using the following code to pop up a help balloon when the mouse hovers over an input element: Code: function eltMouseOver() { // if there is already a help division displayed, hide it if (helpDiv) { helpDiv.style.display = 'none'; helpDiv = null; } // in some cases the mouseover event is against the table cell // containing the input element. Locate the first element node // under the cell to display help for if (this.nodeName == 'TD') { // mouseover defined for the cell containing the element for (var i = 0; i < this.childNodes.length; i++) { // loop through children of this var cNode = this.childNodes[i]; if (cNode.nodeType == 1) { // element helpElt = cNode; break; } // element } // loop through children of this } // mouseover defined for the cell containing the element else helpElt = this; helpDelayTimer = setTimeout(popupHelp, 2000); } // eltMouseOver function popupHelp() { displayHelp(helpElt); } // popupHelp function displayHelp(elt) { var helpDivName = ""; try { // the help division name may be supplied by an explicit private // attribute "helpDiv" if (elt.helpDiv) helpDivName = elt.helpDiv; else if (elt.name && elt.name.length > 0) { // element has a name if (elt.name.substring(elt.name.length - 2) == "[]") { // multiple selection helpDivName = elt.name.substring(0, elt.name.length - 2); } // multiple selection else { // ordinary element helpDivName = elt.name; } // ordinary element } // element has a name else { // try id attribute helpDivName = elt.id; } // try id attribute } catch(e) { // exception thrown trying to get help division name var attrList = ""; for(attr in elt) attrList += attr + ", "; alert("keyDown: exception=" + e + ", elt=" + attrList); } // exception thrown trying to get help division name // to ensure unique id values, the supplied name is // prefixed with "Help". However some forms have not been // updated to use this convention helpDiv = document.getElementById("Help" + helpDivName); if (!helpDiv) { // first choice not found // strip off trailing decimal digits if any representing // a row number for (var l = helpDivName.length; l > 1; l--) { // find last non-numeric character if (helpDivName[l - 1] < '0' || helpDivName[l - 1] > '9') { // non-digit helpDivName = helpDivName.substr(0, l); helpDiv = document.getElementById("Help" + helpDivName); break; } // non-digit } // find last non-numeric character // if cannot find division with name prefixed with 'Help' // then try without if (!helpDiv) helpDiv = document.getElementById(helpDivName); } // first choice not found if (helpDiv && (helpDiv != elt)) { // have a help division to display // If presentation style requires capitalization, // report it in help var textTransform = ""; if (elt.currentStyle) { // browser supports IE API textTransform = elt.currentStyle.textTransform; } // browser supports IE API else if (window.getComputedStyle) { // browser supports W3C API var style = window.getComputedStyle(elt, null); textTransform = style.textTransform; } // browser supports W3C API if (textTransform == "capitalize") { if (!helpDiv.capitalized) { // add text to help helpDiv.appendChild(document.createTextNode( "Text entered in this field is automatically capitalized." )); helpDiv.capitalized = true; } } // if the field has automatic abbreviation expansion // describe it addHelpAbbrs(helpDiv, elt.abbrTbl); // display the help balloon in an appropriate place on the page var cell = elt.parentNode; var row = cell.parentNode; var tbody = row.parentNode; var table = tbody.parentNode; //alert("helpDiv=" + tagToString(helpDiv)); helpDiv.style.left = Math.max(Math.min(getOffsetLeft(elt) - 50, table.offsetWidth - Math.floor(window.innerWidth/2)), 2) + 'px'; helpDiv.style.top = (getOffsetTop(elt) + 20) + 'px'; helpDiv.style.display = 'block'; // so key strokes in balloon will close window helpDiv.onkeydown = keyDown; } // have a help division to display else alert("Cannot find <div id='Help" + helpDivName + "'>"); } // displayHelp I activate support for this on every element in the page by means of the following code in the onload handler: Code: for(var i = 0; i < document.forms.length; i++) { var form = document.forms[i]; for(var j = 0; j < form.elements.length; j++) { var element = form.elements[j]; // pop up help balloon if the mouse hovers over a field // for more than 2 seconds if (element.parentNode.nodeName == 'TD') { // set mouseover on containing cell element.parentNode.onmouseover = eltMouseOver; element.parentNode.onmouseout = eltMouseOut; } // set mouseover on containing cell else { // set mouseover on input element itself element.onmouseover = eltMouseOver; element.onmouseout = eltMouseOut; } // set mouseover on input element itself } // loop through elements in form } // iterate through all forms For an example see this page. This works for every input element on the page except the <textarea>. If I move the mouse over the text area you can see the mouse blink after 2 seconds, but the help balloon does not appear unless you first give the <textarea> the focus by clicking the mouse in the area. I have verified by adding alerts that the mouseover and popup functions are called the same way on the <textarea> as on the other input elements. This is on Firefox 3.6.23 on Ubuntu 10.04. Is this just a quirk of Firefox? for some reason I am unable to read the file contents, or it could be something else, I added in some extra code to see where the script got to and I only get to see '1' on the output. Is there something else I have missed ? I am wanting to ready each line one by one and replace a phrase with another, then output the new line. I visit the 1.txt file in my browser and the file shows fine. var txtFile = new XMLHttpRequest(); txtFile.open("GET", "http://mysite.com/convertJS/1.txt", true); txtFile.onreadystatechange = function() { document.write("1<br>"); if (txtFile.readyState === 4) { // document is ready to parse. document.write("2<br>"); if (txtFile.status === 200) { // file is found document.write("3<br>"); allText = txtFile.responseText; lines = txtFile.responseText.split("\n"); document.write(lines + "<br>"); // I shall be altering the text in each line, search and replace, so only need to be able to read one line at a time. } } } txtFile.send(null); // close file. sorry that i used the quote method to post, but when i used [ code ] it corupted the text as the document . write lines?! Hi, I am not able to submit the page details in IE 6 since am getting Javascript error: "unknown name" while submitting the page. If i press submit button for second time getting javascript error "Permission Denied". I tried to submit the details in IE 7 aswell the same error occurs. But i tried to submit the page in FireFox, its worked great... submitted without any error and the details saved in the database. I dont understand why the details are not submitted through IE6. Please assist on this. rgds, Ganny. Hi, I have requirement to move focus to previous button when onkeydown event occurs on tabout from current button. Below is snippet of code. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script language="Javascript"> function button3(event) { var keydown = event.keyCode; alert(keydown); if(keydown == 9){ document.all.b2.focus(); return false; } } </script> </head> <body> <FORM NAME="form1"> <INPUT id="b1" TYPE="BUTTON" name= "b1" VALUE="Button 1"> <INPUT id="b2" TYPE="BUTTON" name= "b2" VALUE="Button 2"> <INPUT id="b3" TYPE="BUTTON" name= "b3" VALUE="Button 3" onkeydown="button3(event)"> <INPUT id="b4" TYPE="BUTTON" name= "b4" VALUE="Button 4"> </FORM> </body> </html> when the focus is on b3 and if i give tabout then focus should go to b2. But its not working. Can you plz help Siva greetings, I'm unable to find solution for dreamweaver reporting syntax error with the following page: http://www.redskyjewelry.com/test_product_detail.html I am revamping my website so the css is not set up for this page but that's okay. I have put in the various javascripts based on the product so the page is similar to a template. The syntax error is for the second set of boxes, the bracelet length options, and specifically for line with: form.amount.value = 6.5 inches; from the following script-- <SCRIPT language=javascript> function BraceletLength(form) { if (form.os0.value == "6.5 inches") { form.amount.value = 6.5 inches; form.item_number.value = "6.5 inches"; } if (form.os0.value == "7 inches") { form.amount.value = 7 inches; form.item_number.value = "7 inches"; } if (form.os0.value == "7.5 inches") { form.amount.value = 7.5 inches; form.item_number.value = "7.5 inches"; } if (form.os0.value == "8 inches") { form.amount.value = 8 inches; form.item_number.value = "8 inches"; } } </SCRIPT> I hope I have included enough information and I thank any input into this glitch I am having. I'll check back tomorrow, and thank you. judith I am trying to get a div's content to change using javascript but for some reason it is not working and i get no errors looking at the error console. the code that is waiting for the content... Code: <div style="font-weight: bold;">count = <div id="desc" style="float: left;"></div> descriptions to do.</div><br clear="all" /> the code that should change the content.... Code: <? echo("<script type=\"text/javascript\"> document.getElementById('desc').value='" . $count . "'; </script>"); ?> when i view the source code the javascript lines show like so... Code: <script type="text/javascript"> document.getElementById('desc').value='373'; </script> do i have the javascript correct ? I'm using buttons to scroll content in an iframe. Works fine on IE and Chrome. Firefox cannot identify the frame and I get this error Error: window.frames.iframe is undefined My code is Code: var mypage= eval(window.frames["iframe"].contentlayer.style); My iframe is Code: <iframe id="iframe" src="scroll.asp" width="320" height="480" scrolling="no" marginheight="0" marginwidth="0"> And the scroll.asp is Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> </head> <body> <DIV ID="contentlayer" STYLE="position:absolute; width:320px; left: 0px; top: 0px"> <img src="images/scroll.jpg" width=320 height=960> </div> </body> </html> Any idea why Firefox can't understand the reference? I am learning javascript from this site, and one of the programs code given is now explained to the point that I can not use it. I don't know how to call it. I would be glad if someone would examine the code to see how it should be applied. Date and Time Scripts Frank Hi, I am writing an application which needs to open a modal dialog window in a secure connection. I am able to open the dialog using HTTPS, but on the status bar I cannot see the SSL Padlock. The application is being written in .NET and the browser I use is IE 6.0. Any suggestions and feedback are welcome. Regards Totre Hi, I have some javascript that I am using to get information from a SharePoint Site Options table (name and value) and I am adding this to my sharepoint sites (headers, title bar etc.). the javascript code in the heading of the document is as follows: Code: <script language="'javascript'" type="text/javascript"> //wait until client object model dependencies are loaded before executing our code ExecuteOrDelayUntilScriptLoaded(getWebProperties, "sp.js"); var webProperties; function getvalue(value) { return webProperties.get_item((value)); } function getWebProperties() { var clientContext = new SP.ClientContext.get_current(); webProperties = clientContext.get_web().get_allProperties(); clientContext.load(webProperties); clientContext.executeQueryAsync(Function.createDelegate(this, this.getWebPropertiesSucceeded), Function.createDelegate(this, this.onQueryFailed)); } function getWebPropertiesSucceeded() { var allProps = webProperties.get_fieldValues(); document.getElementById('lblName').innerHTML= webProperties.get_item('ProjectName'); document.getElementById('link').innerHTML= webProperties.get_item('siteURL'); var customProp = ""; //make sure the property is there before using it. if(webProperties.get_fieldValues().CustomSite_Version != undefined) { var customProp = webProperties.get_fieldValues().CustomSite_Version; } } function onQueryFailed(args, sender) { //handle errors here } </script> Could it be because I am trying to call two sets of values in a row? I have the following lines: Code: document.getElementById('lblName').innerHTML= webProperties.get_item('ProjectName'); document.getElementById('link').innerHTML= webProperties.get_item('siteURL'); and maybe it is because I am trying to get more than one set of information? now in the aspx part of the document, I want to call one of the variables in a couple of places and I am using this: Code: <div id="lblName"></div> It works great in the first instance but when I try to use it again, it doesn't show up and I don't know why. If I delete the first one, it shows up in the second location. does anyone who is a programmer see where I may be going wrong? Our SharePoint programmer quit and I am now in the frying pan so to speak. thanks all. |