JavaScript - Problems Clearing An Html Text Object
Hi there, this is my first post.
I'm very new to javascript and have been programming a "beer counter" that simply counts +1 into a text object after every click. After I got this to work I copied the code in order to make a clear button / function. I've been having problems, even though the code seems to be identical. This is likely an obvious question, pardon my inexperience. <html> <head> <title>Beer Counter</title></head> <body><script language="Javascript"> var beers = 0 var output ="" function beer() { beers = beers + 1 output = document.getElementById('output') output.value = beers } function clear() { beers = 0 output = document.getElementById('output') output.value = beers } </script> <input type='button' value='Crush' onclick='beer()'; /> Beer count:</input> <input type='text' id='output' name='output'; /><br/> <input type='button' value='Clear' onclick='clear()'; /> </body> </html> Similar TutorialsHey guys, First shot at JS so please be gentle! I'm trying to get this script to clear the default value of my input elements on focus. It works well the first time, however, if a user inputs some fresh text, selects something else, then selects the same input element again, it will clear the text they entered. Make sense? Here's the script (thanks in advance!!): Code: <script language="JavaScript"> function clickFocus(input){ input.className = 'focus'; if (input.value = input.defaultValue){ input.value = ''; } } function unFocus(input){ input.className = 'entered'; if (input.value == ''){ input.value = input.defaultValue; input.className = 'normal' } } </script> <form action="confirmation.php" method="post" enctype="multipart/form-data" name="form" id="form" onsubmit="return checkForm(this)"> <input type="text" name="name" value="Name" onfocus="clickFocus(this)" onblur="unFocus(this)" /> <input type="text" name="email" value="Email" onfocus="clickFocus(this)" onblur="unFocus(this)" /> <input type="text" name="subject" value="Subject" onfocus="clickFocus(this)" onblur="unFocus(this)" /> <textarea type="text" name="message" onfocus="clickFocus(this)" onblur="unFocus(this)" rows="5">Message</textarea> <input class="submit" name="submit"type="submit" value="Send Message" /> </form> This is some of the script that I have and it works well. The story is that I have a drop down list and depending on the selection a different set of text is displayed below the list. Code: if (Val == "general") { document.getElementById('Link0').innerHTML="<font size=2><a Href='http://www.web1.com/'>web 1</a>" document.getElementById('Link1').innerHTML="<font size=2><a Href='http://www.web2.com/'>web 2</a>" However when the selection runs this part of the code:- Code: if (Val == "duties") { document.getElementById('Link0').innerHTML="" document.getElementById('Link1').innerHTML="<font size=2><a Href='http://www.web2.com/'>web3</a>" The "web 3" text is placed under where the 'Link0' text would have been if there had been some. So basically what I need to do is set the 'Link0' text to nothing and have the 'Link1' text sit in its place. I know I could just put the 'Link1' text in the 'Link0' element but I have other controls on the screen that mean I need to run it as it is. I hope that is clear, cheers Daniel. I need to clear the default value from a textarea when a user clicks on the textarea and then replace it if the user clicks away from the textarea without modifying it. I have managed to accomplish this with the textfields in my forms but I am struggling to get the textarea element to mimic this behavior. Here is the script I am using: Code: addEvent(window, 'load', init, false); function init() { var formInputs = document.getElementsByTagName('input'); for (var i = 0; i < formInputs.length; i++) { var theInput = formInputs[i]; if (theInput.type == 'text' && theInput.className.match(/\binput\b/)) { /* Add event handlers */ addEvent(theInput, 'focus', inputText, false); addEvent(theInput, 'blur', replaceDefaultText, false); /* Save the current value */ if (theInput.value != '') { theInput.defaultText = theInput.value; } } } } function inputText(e) { var target = window.event ? window.event.srcElement : e ? e.target : null; if (!target) return; if (target.value == target.defaultText) { target.value = ''; } } function replaceDefaultText(e) { var target = window.event ? window.event.srcElement : e ? e.target : null; if (!target) return; if (target.value == '' && target.defaultText) { target.value = target.defaultText; } } HTML: [HTML] <form action="#"> <fieldset> <legend></legend> <input type="text" value="Your Name" id="name" class="input" /> <label for="name">Name Required</label><br/> <input type="text" value="Your Email" id="email" class="input"/> <label for="email">E-mail Required</label><br/> <input type="text" value="Your Website" id="website" class="input"/> <label for="website">Website</label> <textarea rows="15" cols="71">Your Message Goes Here.</textarea> <input type="submit" value="Submit Comment" class="button" /> </fieldset> </form> [/HTML] I am really just trying to get this form to behave the way all other forms on the internet work- where text clears when a user clicks on a form element and replaces itself if the user doesn't enter new text. I have it working on the text field but no the textarea. Help! I am trying to use my date Object function to get the date from the comp but my variables in my function are coming up undefined. Here is my function: Code: function displayTime() { var currentTime, hour, minute, second, range, m, s currentTime = new Date() var hourInt = currentTime.getHours() var minuteInt = currentTime.getMinutes() var secondInt = currentTime.getSeconds() if (hourInt > 12) { range = "PM" hourInt -= 12 } else { range = "AM" } hour = String(hourInt) if (minuteInt < 10) { m = String(0) + String(minuteInt) } minute = m if (secondInt < 10) { s = String(0) + String(secondInt) } second = s document.timeForm.timeBox.value = hour + ":" + minute + ":" + second + " " + range alert(hour + ":" + minute + ":" + second + " " + range) I appreciate the help As you can see in the attached Firebug screen capture, I am setting up a new Date object with "2011", "4", "23" but in the watch window you can see it is setting up the date object with a month of May instead of April. I also tried 2011, 4, 23 (no quotes) and no improvement. What am I missing? Hi all. I'm learning JS from pretty much scratch and the first thing I'm trying to do is simply make an image fade function. I just can't seem to make it work though, the image starts off at the right opacity (im this case 0.5) but after that the page goes white and the script never stops. It does seem to be counting up normally "opacity: 0.6 opacity: 0.7" etc. though. Code: <img src="1.jpg" id="pic1"> <script type="text/javascript"> var amount = 0.5; var target = document.getElementById('pic1'); function fade() { if (target.style.opacity < 1.0) { target.style.opacity = amount; amount = amount + 0.1; document.write("<br>opacity: " + target.style.opacity); setTimeout("fade()", 1000) //fade(); } } fade(); </script> edit I rewrote it to make it simpler but still having basically the same problem D:! Here's a noodle-scratcher: I have a jwplayer in my page, and I've placed a short text describing it underneath it. Works fine in FF and Chrome, but in IE the text vanishes after you click the "Allow blocked content" permissions to allow activex controls. This is what it looks like: Code: <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='450' height='277' id='single1' name='single1'><param name='movie' value='jwplayer/player.swf'><param name= 'allowfullscreen' value='false'><param name='allowscriptaccess' value='always'><param name= 'wmode' value='transparent'><param name='flashvars' value='file=myVideo.f4v&autostart=true'> <embed id='single2' name='single2' src='jwplayer/player.swf' width='450' height='277' allowscriptaccess='always' allowfullscreen='false' flashvars='myVideo.f4v &autostart=truevolume=50'/> <br/> Here is my description text.<br/> If I place the text above the object, then it shows up fine. I'd rather not put it there, but I can if I can't figure the problem out. Any thoughts? Why is IE destroying my text? Thanks as always, ~gyz hi all, I have a simple website with 2 Frames, In top frame I have a button that invokes CGI script and internally that CGI script prints info (text) into the bottom frame. Going further we want to print the output coming from CGI into a textarea object in bottom form. I have a function in my CGI script: But ends up printing multiple textarea objects in lower frame. We want to print each line of text into the same textarea object in lower frame. and at the end display a new button. How can we do this using javascript/CGI? I tried the following but not displaying anything. sub print_message { my($message1, $message2) = @_; my $final_message = $message1 . " " . $message2; print <<END_HTML; <html> <head> <form name="myform"> <table border="0" cellspacing="0" cellpadding="5"> <tr> <td><textarea name="outputtext" rows="10" cols="100"> $final_message </textarea> </td> </tr> </table> </form> <style> <!-- a{font-weight:bold;font-family:arial;text-decoration:underline;font-size:13px;} a:hover{font-weight:bold;font-family:arial;text-decoration:none;font-size:13px;} // --> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <a href="main.html" rel="nofollow" target="bottom"></a> <title>CTS Debug Information</title> <style type="text/css"> img {border: none;} </style> </head> <body> </body> </html> END_HTML I created this function in javascript: <script language="javascript" type="text/javascript"> function addtext() { var newtext = document.myform.outputtext.value; var nextLineTextNode = document.createTextNode(newtext + "\r\n"); var logData = document.getElementById("outputtext"); logData.appendChild(nextLineTextNode); logData.scrollTop = logData.scrollHeight - logData.clientHeight; } </script> But when i implemented in my CGI nothing is printed. Thanks!!! Wondering if anyone could point me in the right direction! I am trying to create a HTML form for a hire company that has multiple selection criterias i.e. mpg, passenger/seats, gearbox etc etc - based on these selections I need the form information to check against my JS object/array and find those objects which match the relevant attributes. The form itself has only radio buttons and one text field - I know how to take the data from an element of the form and put it into a variable so I can check it, but what I really want is to have all the information on the form matched against my object - Would I be looking at perhaps putting the form selections into a blank/new array and then comparing that to the object? If so any help/guidance would be greatly appreciated! Code: //array information */ var car=new Array("Lamborghini Aventador", "Peugeot 107", "VW Golf", "Toyota Prius", "Kia Sedona", "Citroen 2CV", "Vauxhall Insignia", "Mercedes C180", "Reliant Robin", "Ford Fiesta"); var mpg=new Array(13, 61, 47, 65, 32, 62, 40, 30, 70, 49); var passenger=new Array(2, 4, 5, 5, 7, 4, 5, 5, 2, 5); var luggage=new Array(0, 1, 2, 2, 4, 1, 3, 2, 1, 2); var fuel=new Array("Petrol", "Petrol", "Diesel", "Petrol", "Diesel", "Petrol", "Diesel", "Petrol", "Petrol", "Petrol"); var gearbox=new Array("Semi-Automatic", "Manual", "Manual", "Manual", "Manual", "Manual", "Automatic", "Automatic", "Manual", "Automatic"); var aircon=new Array("Yes", "No", "Yes", "Yes", "Yes", "No", "Yes", "Yes", "No", "Yes"); var daycost=new Array(2000, 30, 34, 44, 40, 25, 45, 87, 10, 31); var weekendcost=new Array(3800, 90, 97, 110, 99, 70, 115, 243, 25, 90); var weeklycost=new Array(12000, 135, 167, 183, 162, 124, 173, 560, 65, 130); var cars = {}; for(var i=0;i<car.length;i++) { cars[i] = { name: car[i], mpg: mpg[i], passenger: passenger[i], luggage: luggage[i], fuel: fuel[i], gearbox: gearbox[i], aircon: aircon[i], daycost: daycost[i], weekendcost: weekendcost[i], weeklycost: weeklycost[i] } } Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Car Hires</title> <link rel="stylesheet" type="text/css" href="view.css" media="all"> <script type="text/javascript" src="array.js"></script> </head> <body id="main_body" > <img id="top" src="top.png" alt=""> <div id="form_container"> <h1><a>Car Hires</a></h1> <form id="myform" class="appnitro" method="post" action=""> <div class="form_description"> <h2>Car Hires</h2> <p>Fill the form below, and we will provide you with a list of cars that match your requirements.</p> </div> <ul > <li id="li_1" > <label class="description" for="element_1">Name </label> <span> <input id="element_1_1" name= "fname" class="element text" maxlength="255" size="8" value=""/> <label>First</label> </span> <span> <input id="element_1_2" name= "element_1_2" class="element text" maxlength="255" size="14" value=""/> <label>Last</label> </span> </li> <li id="li_2" > <label class="description" for="element_2">Email </label> <div> <input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/> </div> </li> <li class="section_break"> <h3>Section Break</h3> <p></p> </li> <li id="li_4" > <label class="description" for="element_4">No. of Passengers </label> <div> <input id="element_4" name="passengers" class="element text small" type="text" maxlength="255" value=""/> </div><p class="guidelines" id="guide_4"><small>Enter the number of passengers in numerical format</small></p> </li> <li id="li_5" > <label class="description" for="element_5">Items of Luggage </label> <span> <input id="element_5_1" name="luggage" class="element radio" type="radio" value="1" /> <label class="choice" for="element_5_1">1</label> <input id="element_5_2" name="luggage" class="element radio" type="radio" value="2" /> <label class="choice" for="element_5_2">2</label> <input id="element_5_3" name="luggage" class="element radio" type="radio" value="3" /> <label class="choice" for="element_5_3">3</label> <input id="element_5_4" name="luggage" class="element radio" type="radio" value="4" /> <label class="choice" for="element_5_4">4</label> </span> </li> <li id="li_6" > <label class="description" for="element_6">Fuel Type </label> <span> <input id="element_6_1" name="fuel" class="element radio" type="radio" value="1" /> <label class="choice" for="element_6_1">Diesel</label> <input id="element_6_2" name="fuel" class="element radio" type="radio" value="2" /> <label class="choice" for="element_6_2">Petrol</label> </span> </li> <li id="li_7" > <label class="description" for="element_7">Transmission/Gear Box </label> <span> <input id="element_7_1" name="gearbox" class="element radio" type="radio" value="1" /> <label class="choice" for="element_7_1">Automatic</label> <input id="element_7_2" name="gearbox" class="element radio" type="radio" value="2" /> <label class="choice" for="element_7_2">Manual</label> </span> </li> <li id="li_8" > <label class="description" for="element_8">Airconditioning </label> <span> <input id="element_8_1" name="aircon" class="element radio" type="radio" value="1" /> <label class="choice" for="element_8_1">Yes</label> <input id="element_8_2" name="aircon" class="element radio" type="radio" value="2" /> <label class="choice" for="element_8_2">No</label> </span> </li> <li id="li_9" > <label class="description" for="element_5">Miles Per Gallon</label> <span> <input id="element_5_1" name="MPG" class="element radio" type="radio" value="1" /> <label class="choice" for="element_5_1">10-30</label> <input id="element_5_2" name="MPG" class="element radio" type="radio" value="2" /> <label class="choice" for="element_5_2">30-50</label> <input id="element_5_3" name="MPG" class="element radio" type="radio" value="3" /> <label class="choice" for="element_5_3">50-80</label> </span> </li> <li id="li_10" > <label class="description" for="element_9">Duration of Rental </label> <div> <select class="element select medium" id="element_9" name="element_9"> <option value="" selected="selected"></option> <option value="1" >Day</option> <option value="2" >Weekend</option> <option value="3" >Full Week</option> </select> </div> </li> <li class="buttons"> <input type="hidden" name="form_id" value="365314" /> <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" /> </li> </ul> </form> <div id="footer"> Car Hire Form</a> </div> </div> <img id="bottom" src="bottom.png" alt=""> </body> </html> Hi All, I have a HTML table with combobox option in one of the column.when I select a value in dropdown the background color changes to red or green based on the selction.My Code looks like : Code: function OnHTMLTable1_ClickLink ( ) { var irows = document.getElementById("HTMLTable1").getElementsByTagName('tr'); var iRowCount = irows.length; for(i=0; i<=iRowCount; i++) { if(document.getElementById("list"+i).selectedIndex == 1) { document.getElementById("list"+i).options[1].style.backgroundColor = "green"; } if(document.getElementById("list"+i).selectedIndex == 2) { document.getElementById("list"+i).options[2].style.backgroundColor = "Red"; } } } When I select a value it is throwing me "Object Required error".Can anyone tell me where this code is misbehaving? Thanks, Anil Hello, I am having some issues passing information to a text box in a form. Basically, right now, when a date on the calendar is selected, the date is printed in the <div id="date"> field. however i want to put this value in the form text box instead. I've tried document.getElementsByName('date') or getElementById('date') and get either a "Object HTMLDivElement" or "Object NodeName" in the text box. Here is the relevant code... I hope Code: <script type="text/javascript" src="javascripts/prototype.js"></script> <script type="text/javascript" src="javascripts/calendarview.js"></script> <script type="text/javascript"> window.onload = function() { Calendar.setup({ dateField : 'date', parentElement : 'calendar' }) } function writeme(){ document.form1.datebox.value = document.getElementsByName('date').value; } </script> </head> <body style="font-family: calibri;"> <div id="calendar" style="margin: 60px;" onmouseup="writeme()"></div> <div id="date" name="date">Select Date</div> <form name="form1"> <input type="text" name="datebox" id="datebox" size="12" value="" /> <input type="button" name="testbtn" value="test me" /> </form> Hi, I am having trouble searching for text in a textarea in all browsers. I display formatted text in a textarea with tinyMCE editor. Some of the text contains blanks ('______') which the user needs to find and fill in (usually with a number). I have written a new button on the toolbar of the editor which will find and highlight the blank when clicked. The user will click the button, fill in the text, click the button, fill in the text, etc. In IE the blanks are highlighted just fine. The only problem is: user clicks button and first blank is highlighted. User fills in the text then clicks the button again. Second blank should be highlighted but it skips right to the third blank. If you don't fill anything in, the next blank will be highlighted. If you highlight and then fill anything in, the next blank is skipped and the following blank is highlighted. Any thoughts? But my worst problem is with Mozilla. I get an error. It does not act like setSelectionRange(pos, pos+len(str)) is a valid function call. I receive the following error: "component returned failure code: 0x800004005 (NS_ERROR_FAILURE)[nsIDOMNSHTML TextareElement.setSelectionRange]" Here is my function: var win = window; var n = 0; var str = '______'; function FindBlanks() { var txt, i, found; win = tinyMCE.get('txtPolicy').getDoc(); if (str == "") return false; if (window.execScript) { txt = win.body.createTextRange(); //Find the nth match from the top of the page for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) { txt.moveStart("character", 1); txt.moveEnd("textedit"); } // If found, mark it and scroll it into view if (found) { txt.moveStart("character", -1); txt.findText(str); txt.select(); txt.scrollIntoView(); // n = i--; n++; } //Otherwise, start over at the top of the page and find first match else { if (n > 0) { n = 0; alert("End of document has been reached."); } //Not found anywhere, give message. else alert("No blanks found."); } } else { //document.getElementById('txtPolicy').setFocus; var ht = '______'; if (ht.length == 0) { alert('highlightText has zero lenth'); return false; } var str2 = document.getElementById('txtPolicy').value; var startPos = str2.indexOf(ht); if (startPos == -1) { alert('No blanks found'); return false; } document.getElementById('txtPolicy').focus(); document.getElementById('txtPolicy').setSelectionRange(startPos, startPos + ht.length); return true; if (n == 0) alert ("No blanks found."); } return false; } Can anyone help me with this? Thanks. Hi, every time I try and alert: [ { number:0, secondnumber:0 }, { number:2, secondnumber:1 }, { number:1, secondnumber:2 } ] it just shows [object object], [object object], [object object]. Why is this and what can I do to make the record be shown as it is above in an alert? Thanks. I created a method for displaying an object's properties: Code: renderfunction = false; function showProperty (object, property) { document.write ('<td class="type">' + (typeof object[property]) + '</td>' + '<td class="name">' + property + '</td>'); document.writeln('<td class="value">' + ( (typeof object[property] != 'function') ? object[property] :( (property != 'showProperties') ? ( renderfunction ? object[property]() : ('<span class="self">NOT RENDERED</span>') ) : ('<span class="self">THIS</span>') ) ) + '</td>'); document.writeln('<td class="hasOwnProperty" >' + ( object.hasOwnProperty(property) ? "Local" : "Inherited" ) + '</td>'); if (typeof object[property] == 'function') { document.writeln ('<td class="function">' + object[property] + '</td>'); } else { document.writeln ('<td class="function"> </td>'); } } As long as renderfunction = false, the object is fine coming out of this function. However, if I change renderfunction to true, all my properties become undefined. Why isn't this working as I expect it to? How should I fix it? Thanks in advance, -Brian. I can't get any info from Firebug except that one line, uncaught exception [object Object]. The code fully worked, then I needed to make it dynamically create Sortables from the scriptaculous library based on how many X were in a table in my database, which I've done, and I'm thinking it may be a simple slight parse error of some type, I'm not too good with Javascript, because now my script barely works. I've double checked the script's source code, the PHP variables are exactly what they should be. Code: print<<<HERE Sortable.create('sortlist$box', { tag: 'img', overlap:'horizontal',constraint:false, containment: $list, dropOnEmpty: true, onChange: function(item) { var list = Sortable.options(item).element; if(changeEffect) changeEffect.cancel(); changeEffect = new Effect.Highlight('changeNotification', {restoreColor:"transparent" }); }, onDrop: function(item) { var thing=Sortable.options(item).element.identify(); var anchors = document.getElementById(thing).childNodes.length-2; if(anchors > 20){ alert('This box had 20 creatures in it already, your last action has not been saved.'); window.location.reload(); } else{ new Ajax.Request("saveImageOrder.php", { method: "post", parameters: { data: Sortable.serialize("sortlist$box") } }); } } }); HERE; $box++; } ?> }); </script> if you solve this I'll send ya $10 via paypal I cant figure out how to get the value of a name inputed in HTML into the following script... <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)"> <meta name="created" content="Sat, 10 Sep 2011 19:40:31 GMT"> <meta name="description" content=""> <meta name="keywords" content=""> <title>Enter golfers name</title> <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <SCRIPT LANGUAGE="JavaScript" type="text/javascript" src="script1.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function GetPage(){ document.write("OK") <!-- var fullname = "david park" var lab = ""; var result = fullname.toUpperCase(); var word=result.split(" "); fname = word[0] lname = word[1] alpha = lname.slice(0,1); lab = fname.concat("_") lab = lab.concat(lname) if(word[2]){ ext = word[2] lab = lab.concat("_") lab = lab.concat(ext) } var intro = "./Stats_"; page = intro.concat(alpha); page = page.concat("_golfers.html#"); page = page.concat(lab) document.write(page) <!-- window.location.pathname = page } </script> </head> <body> <center> <form action="form_action.asp" method="get"> You can enter the golfersname or select him from the above list.<br><br> <input type="text" name="fullname" /> <button type="submit" onclick="GetPage()">GO</button> </form> </center> <BR><BR><BR> This is the end </body> </html> Hi, Sorry this is probably quite a noobish question, but I have a function which accepts the parameter "screen_name". I want to include this variable within some HTML, which is the code for a Twitter. Here is the function: PHP Code: var htmlTest = "<script src='http://widgets.twimg.com/j/2/widget.js'></script>" + "<script>" + "new TWTR.Widget({" + "version: 2," + "type: 'profile'," + "rpp: 8," + "interval: 6000," + "width: 250," + "height: 300," + "theme: {" + "shell: {" + "background: '#0e428f'," + "color: '#ffffff'" + "}," + "tweets: {" + "background: '#ffffff'," + "color: '#615161'," + "links: '#0748eb'" + "}" + "}," + "features: {" + "scrollbar: false," + "loop: false," + "live: false," + "hashtags: true," + "timestamp: true," + "avatars: false," + "behavior: 'all'" + "}" + "}).render().setUser('" + screen_name + "').start();" + "</script>"; var test = "hello"; document.getElementById('dynamic-content').innerHTML = htmlTest; } </script> The function works fine when I omit the HTML and just return "screen_name" to the target <div>, but it doesn't work as above. Can anyone spot what I'm doing wrong??? Hi all, I'm stumped on finding a way in javascript to create an object factory whose instances are also object factories. In short I want something like that below, but no joy ... any clues? Code: function createClass () { return new createClass() function createClass() { return new createInstance () function createInstance () { //Default properties, values and methods which might later be extended } } } var createDoor = createClass(); var door1 = createDoor(); var door2 = createDoor(); var createChair = createClass(); var chair1 = createChair (); var chair2 = createChair (); I'm writing a program that involves a network of interconnected nodes (or simply objects in my example below). It depends on being able to access properties of an object's linked objects (a bit oddly worded, sorry)... Problem is I'm not sure how to properly access those properties... see below please. <script> //This is an example of a problem im having in my own code... //I want to access the name of the object within the links array wintin the object... var objA = {name: "Object A", links: [objB, objC]}; var objB = {name: "Object B", links: [objC, objD, objE]}; var objC = {name: "Object C", links: [objB]}; var objD = {name: "Object D", links: [objE]}; var objE = {name: "Object E", links: [objD]}; //ex: I want to access the name of Object A's first link... console.log(objA.links[0].name); </script> I'm hoping to get "Object B"... But instead I get: TypeError: Result of expression 'objA.links[0]' [undefined] is not an object. Is there another way around this? Any thoughts are appreciated. Ignore post (if mod, please delete)
|