JavaScript - *please Look At These* Properties And Methods & Changing Properties
I HAVE BEEN TRYING TO FIGURE OUT THE PARAMETERS IN THE FUNCTIONS, INCLUDING THE ARRAYS [i], [p], ["get_" + i], ["set_" + i] AND HOW THE METHODS ARE BEING CALLED IN RELATION TO i, p and val, so that I can make sense of this code. If possible can you explain the code also
What I will like to know are the properties and methods of the objects generated in the following code? Also I want to know how I can use those methods to show and change the name and age for the emp2 object. this is the code: function Employee(properties) { for (var i in properties) { if (properties.hasOwnProperty(i) && typeof properties[i] != 'function') { this["get_"+i] = (function(p) { return function() { return properties[p]; }; })(i); this["set_"+i] = (function(p) { return function(val) { properties[p] = val; }; })(i); } } } var emp1 = new Employee({ name: "Bob", age: 35, foo: function() {} }); var emp2 = new Employee({ name: "Gary", age: 54 }); Similar TutorialsDo many programmers remember most of the object properties and methods or do they use IDE or references to find those specific objects. I'm starting to learn Javascript and seeing all the different type of objects available can be depressing. Hi all! I'm pretty new to JavaScript and completely new to this forum. I'm James. Well uh, I'm not sure how to... I wanted to make something like this using javascript... Code: myObject.someMethod('something').anotherProperty much like the Code: document.getElementById('someId').style.morestuff But the thing is, I've been around every DOM whatnot I can find, I just can't seem to make it work. I kinda need it to make my own DOM for some API i'm writing. So I can write like... Code: function someGreatAPI(){ this.property1=''; this.property2=''; //... this.method1 = function(var1){ //this should make my firstMethod this.nestedProperty = 0; this.nestedMethod = someFunction; //firstMethods nested method } } //so I can use it like... var obj = new someGreatAPI(); obj.method1(10).nestedMethod(); It has to be possible, it's possible with document.getelementbyid, right? it has to be. Thanks in advance. Hi Experts here, Pls help. I have written the html code like this: <a href="http://mypage.com/docfiles" target="_blank"> Click </a> But the problem is when ever the user click the click option complete url is displaying in two ways 1)on the buttom of the status bar 2)Right click on the option open the properties than also we are getting the complete url. But we don't want to see the complete url,How to hide the Url. Please give me solution I am struggling alot. Thanks and Regards, Srinivas yadav. 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. Hi, I've done control in asp.net/javascript and it works on some pages of mine and as it often happens doesn't work on customer's pages . All pages are run in IE 6.0. After I run debugger I've found out that on my page offsetLeft/Top clientHeight properties have some non-zero values. I have <span id="listCLient" style="width:200px;">..</span> and on my test page elListClient.clientHeight = 200, but on customer's app's page it is 0x0 ? Same with other offsetXXX properties etc. But elListClient.style.height bears correct value. I use those properties everywhere. I think it is some settings somewhere ? or CSS styles ? Can anyone help ? Thanks a lot Vladislav Is there a way to circle trough the native properties (constructor, prototype, length) of an Array object? Obviously, a simple for(a in array) won't do the trick.
I have developped a script in order to resize the height of a div on a web page in order to display it at least up to the size of the window. Here is the code: function resize(){ var frame = document.getElementById("content"); var padding_top = parseInt(window.getComputedStyle(frame,null).getPropertyValue("padding-top")); var padding_bottom = parseInt(window.getComputedStyle(frame,null).getPropertyValue("padding-bottom")); var padding = padding_top + padding_bottom; var bodyheight = document.body.scrollHeight; var windowheight = window.innerHeight; if (bodyheight < windowheight){ frame.style.height = windowheight - padding + "px"; } } It works well, but I was wondering why I am not able to get the padding-top and -bottom using these two instructions: var padding_top = frame.style.paddingTop; var padding_bottom = frame.style.paddingBottom; The script runs but Firebug shows empty strings for both values. How come? Is there a bug in Firefox? Thanks inadvance for your time and help. I'm not sure I phrased the question properly and it's probably easiest to show what I'm trying to get. Basically, I want to find all the properties(?) available for a single track object in iTunes. For example, this is how I access what's stored as the Album and Artist for a track: Code: var myTracks = myPlaylists(1).Tracks; alert(myTracks(1).Album); alert(myTracks(1).Artist); There are a ton of properties (like Album and Artist), but I don't know what they all are, so I was trying to list them like this, but it doesn't work: Code: for(var key in myTracks(1)) alert(key); It's probably obvious why this doesn't work, but does anyone know how to get this list? Thanks for any help! Hi, I want to a javascript function like showModalDialog(<page_name>,'','<options>') here in the option I need to have overlay property where I can set opacity values. Is there any solution? Please letme know Hello. I'm Ansem717 and I've been honestly coding Javascript since August; however, I have learned and coded a few things a couple years ago. I'm not a master at Javascript, but I can follow along what most people say or code. I decided to test my skill in coding, by making a text-based RPG game via Javascript. Now that I've introduced my background information about JS coding, I'd like some of you to help me out with the following code: (It's fairly big, but skip it to see the actual content.) PHP 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>Text Based</title> <link rel="stylesheet" href="ssgame.css" media="screen" /> <script type="text/javascript"> // JavaScript Document var d=document; //Easy shorthand var inventoryWeight=500; //Inventory cannot be heavier than 500 'units' var inventoryMaximum=30; //Inventory cannot have more than 30 items var n='\n'; //Line break for Game screen var nts=n+" "; //Line break for game screen plus three spaces for formating. I'm lazy like that XD var presentRoom=0; var player=null; var objectsInRoom=null; var allOptions="SELF INFO__LOOK AROUND__WALK NORTH__WALK SOUTH__WALK WEST__WALK EAST__ATTACK__TALK__PICKUP__DROP__INVENTORY"; function get(id) { return d.getElementById(id); } function gameSCRN(msg,overwrite,linebreak) { if (linebreak==1) var val = d.tb.gamescreen.value+n; if (linebreak==2) var val = d.tb.gamescreen.value+n+n; else var val = d.tb.gamescreen.value; d.tb.gamescreen.value = (overwrite!=1) ? val+msg : msg; d.tb.mymove.value=""; d.tb.myname.value=""; } //////////////////////////////// //SET ITEMS, NCPS, AND PLAYERS// //////////////////////////////// function Obj(name, health, strength, defense, speed, weight){ this.name = name; this.hp = health; this.str = strength; this.def = defense; this.spd = speed; this.wgh = weight; } var items=new Array(); items[0]=new Array();//ENEMY items[0][0]=new Obj('Kid Goblin', 5, 3, 2, 1) items[0][1]=new Obj('Adult Goblin', 15, 6, 4, 3) items[1]=new Array();//WEAPON items[1][0]=new Obj('Dagger', 0, 2, 0, -1, 5) items[1][1]=new Obj('Ax', 0, 7, 0, -2, 9) items[2]=new Array();//ARMOR items[2][0]=new Obj('Cloth Shirt', 0, 0, 3, 3, 1) items[2][1]=new Obj('Chainmail', 0, 0, 8, -1, 15) ///////////// //SET ROOMS// ///////////// function room(name,actions,objectsInRoom,defaultTxT) { this.name = name this.text = defaultTxT; this.actions = (actions&&actions!=0) ? actions.split("__") : "There are no actions present in this room"; this.objects = (objectsInRoom&&objectsInRoom!=0) ? objectsInRoom.split("__") : "There are no objects present in this room"; } var rooms=new Array(); rooms[0]=new room("clearing","SELF INFO__LOOK AROUND__WALK NORTH__WALK WEST__WALK EAST__WALK SOUTH__DROP",0,player.name+" is stranded in a clearing.") rooms[1]=new room("goblin hideout","SELF INFO__LOOK AROUND__WALK SOUTH__ATTACK__TALK__DROP",items[0][0]+"__"+items[0][1],player.name+" has approched a goblin hideout!") rooms[2]=new room("weaponry","SELF INFO__LOOK AROUND__WALK WEST__PICKUP__DROP",items[1][0]+"__"+items[1][1],player.name+" is inside a weaponry! Weapons increase "+player.name+"\'s strength, but may decrease his speed. Another thing to account for is "+player.name+"\'s inventory and weight. It's not like "+player.name+"\'s inventory has no end.") rooms[3]=new room("armory","SELF INFO__LOOK AROUND__WALK NORTH__PICKUP__DROP",items[2][0]+"__"+items[2][1],player.name+" is in an armory! Armor increases "+player.name+"\'s defence, but may decrease, or even increase, his speed. Another thing to account for is "+player.name+"\'s inventory and weight as well as the Armor's weight. It's not like "+player.name+"\'s inventory has no end.") rooms[4]=new room("empty room","SELF INFO__LOOK AROUND__WALK EAST__DROP",0,player.name+" has noticed a sign that says, \"No one may enter.\" Behind the sign, there is a large barbed fence that "+player.name+" cannot penetrate.") //////Actual Content function gameStart() { d.tb.gamescreen.value=" "; gameSCRN('First thing is first. Name yourself! At the bottom, there should be a small box you can type into. Type your name into that box.',1,1); } function nameSelf() { var name=d.tb.myname.value; player=new Obj(name, 100, 0, 0, 5); gameSCRN(n+"Hello there "+player.name+"!"+n+n+"In a couple of seconds, the game will begin."); get("name").style.display="none"; get("act").style.display="block"; setTimeout(function(){ActualGameStart();},5000) } function ActualGameStart() { presentRoom=0 visualizeRoom(); } function visualizeRoom() { gameSCRN(rooms[presentRoom].text,1,0); if (rooms[presentRoom].actions!="There are no actions present in this room") { for (i=0; i<rooms[presentRoom].actions.length; i++) { gameSCRN(rooms[presentRoom].actions[i],1,0); } } else { gameSCRN(rooms[presentRoom].actions,1,0); } } //The below functions have been commented out because I had an idea. I didn't want these to collide, and since that idea is almost complete, I'm keeping these incase I need to take some of the below and scatter them up top. /*function PreformAction() { var dsmv=d.tb.mymove.value.toUpperCase(); var cnotdsmv="You cannot "+dsmv+" at this moment."; if (dsmv==diffOptions[0]) { if (room==1) {gameSCRN(player.name+" "+dsmv+" but doesn't seem to find anything",0,2);} //Center room if (room==2) {gameSCRN("room==2",0,2);} //Northern Room if (room==3) {gameSCRN("room==3",0,2);} //Eastern if (room==4) {gameSCRN("room==4",0,2);} //Southern if (room==5) {gameSCRN("room==5",0,2);} //Western } else if (dsmv==diffOptions[1]) { if (room==1) {gameSCRN(player.name+" "+dsmv+" into room 2. Add extra functions and karp here.",0,2);} if (room==2) {gameSCRN(cnotdsmv,0,2);} if (room==3) {gameSCRN(cnotdsmv,0,2);} if (room==4) {gameSCRN(player.name+" "+dsmv+" into room 1.",0,2);} if (room==5) {gameSCRN(cnotdsmv,0,2);} } else if (dsmv==diffOptions[2]) { if (room==1) {gameSCRN(player.name+" "+dsmv+" into room 4. Add extra functions and karp here.",0,2);} if (room==2) {gameSCRN(player.name+" "+dsmv+" into room 1.",0,2);} if (room==3) {gameSCRN(cnotdsmv,0,2);} if (room==4) {gameSCRN(cnotdsmv,0,2);} if (room==5) {gameSCRN(cnotdsmv,0,2);} } else if (dsmv==diffOptions[3]) { if (room==1) {gameSCRN(player.name+" "+dsmv+" into room 5. Add extra functions and karp here.",0,2);} if (room==2) {gameSCRN(cnotdsmv,0,2);} if (room==3) {gameSCRN(player.name+" "+dsmv+" into room 1.",0,2);} if (room==4) {gameSCRN(cnotdsmv,0,2);} if (room==5) {gameSCRN(cnotdsmv,0,2);} } else if (dsmv==diffOptions[4]) { if (room==1) {gameSCRN(player.name+" "+dsmv+" into room 3. Add extra functions and karp here.",0,2);} if (room==2) {gameSCRN(cnotdsmv,0,2);} if (room==3) {gameSCRN(cnotdsmv,0,2);} if (room==4) {gameSCRN(cnotdsmv,0,2);} if (room==5) {gameSCRN(player.name+" "+dsmv+" into room 1.",0,2);} } }*/ /*function displayOptions(objects) { if (objects=="none") { gameSCRN(n+n+"OPTIONS:",0,1) gameSCRN(nts+diffOptions[0],0,0) gameSCRN(nts+diffOptions[1],0,0) gameSCRN(nts+diffOptions[2],0,0) gameSCRN(nts+diffOptions[3],0,0) gameSCRN(nts+diffOptions[4],0,0) } }*/ </script> </head> <body> <center> <h1>Text-Based Game Name Coming Soon</h1> <form name="tb" id="tb"> <textarea id="gamescreen" name="gamescreen" cols="67" rows="20" onfocus="blur()"></textarea><br /><br /> <div id="act"> What do you do?<br /> <input type="text" id="mymove" name="mymove" /><br /> <input type="button" id="wdyd" name="wdyd" value="Preform action!" onclick="PreformAction()" /> </div> <div id="name"> What do you do?<br /> <input type="text" id="myname" name="myname" /><br /> <input type="button" id="namebtn" name="namebtn" value="Preform action!" onclick="nameSelf()" /> </div> </form> </center> </body> <script type="text/javascript"> //Initiate functions gameStart(); </script> </html> Sorry It's so large. I'm have a major bug and it's getting in my way. It has to do with the rooms objects. As you can see I set a new array to have the ability to create rooms on the spot and each of the rooms contacted the function of creating an object. PHP Code: function room(name,actions,objectsInRoom,defaultTxT) { this.name = name this.text = defaultTxT; this.actions = (actions&&actions!=0) ? actions.split("__") : "There are no actions present in this room"; this.objects = (objectsInRoom&&objectsInRoom!=0) ? objectsInRoom.split("__") : "There are no objects present in this room"; } var rooms=new Array(); rooms[0]=new room("clearing","SELF INFO__LOOK AROUND__WALK NORTH__WALK WEST__WALK EAST__WALK SOUTH__DROP",0,player.name+" is stranded in a clearing.") rooms[1]=new room("goblin hideout","SELF INFO__LOOK AROUND__WALK SOUTH__ATTACK__TALK__DROP",items[0][0]+"__"+items[0][1],player.name+" has approched a goblin hideout!") rooms[2]=new room("weaponry","SELF INFO__LOOK AROUND__WALK WEST__PICKUP__DROP",items[1][0]+"__"+items[1][1],player.name+" is inside a weaponry! Weapons increase "+player.name+"\'s strength, but may decrease his speed. Another thing to account for is "+player.name+"\'s inventory and weight. It's not like "+player.name+"\'s inventory has no end.") rooms[3]=new room("armory","SELF INFO__LOOK AROUND__WALK NORTH__PICKUP__DROP",items[2][0]+"__"+items[2][1],player.name+" is in an armory! Armor increases "+player.name+"\'s defence, but may decrease, or even increase, his speed. Another thing to account for is "+player.name+"\'s inventory and weight as well as the Armor's weight. It's not like "+player.name+"\'s inventory has no end.") rooms[4]=new room("empty room","SELF INFO__LOOK AROUND__WALK EAST__DROP",0,player.name+" has noticed a sign that says, \"No one may enter.\" Behind the sign, there is a large barbed fence that "+player.name+" cannot penetrate.") In the above code, I'm creating various objects following under the variables rooms[0] to rooms[4], yea?. At the very beggining of the whole RPG game, it brings up some text saying name yourself in the input box below. After you do that, it adds more text to a textarea 'reminding' you of what your name was. The game then is supposed to start right after that, but thats when we run into these functions, on which counteract with the variabled rooms above: PHP Code: function gameStart() { d.tb.gamescreen.value=" "; gameSCRN('First thing is first. Name yourself! At the bottom, there should be a small box you can type into. Type your name into that box.',1,1); } function nameSelf() { var name=d.tb.myname.value; player=new Obj(name, 100, 0, 0, 5); gameSCRN(n+"Hello there "+player.name+"!"+n+n+"In a couple of seconds, the game will begin."); get("name").style.display="none"; get("act").style.display="block"; setTimeout(function(){ActualGameStart();},5000) } function ActualGameStart() { presentRoom=0 visualizeRoom(); } function visualizeRoom() { gameSCRN(rooms[presentRoom].text,1,0); if (rooms[presentRoom].actions!="There are no actions present in this room") { for (i=0; i<rooms[presentRoom].actions.length; i++) { gameSCRN(rooms[presentRoom].actions[i],1,0); } } else { gameSCRN(rooms[presentRoom].actions,1,0); } } As you can see, we have the starting function which is initiated after all of the HTML elements load, then we have the "nameSelf()" function which creates the player as well as sets the timeout for the actual game. The main error code is right he gameSCRN(rooms[presentRoom].text,1,0); and in both IE and Firefox, the script doesn't continue. It doesn't preform the "gameSCRN()" function. In IE, I'm able to click on something that shows me errors within the browser. The Error IE presented: 'rooms[...].text' is null or not an object. What does this mean? I remember setting 'rooms[0].text' to have a string value, and I did do some debugging, 'rooms[0].text' does return with the apropreate value, as well as, 'rooms[presentRoom].text' does too. They just won't work in the above function? I have searched your forums, very good codes out there, but I have not found something concrete that can fix this bug. I'd be really grateful for your help as well as some hints and tips on Javascript coding, since I would also like some help on cleaning up my javascript. And no, I am not taking any programming courses, however much I wish I am. Thanks in advanced! --Regards, --Ansem717 I'm still learning js core using Flanagan's 5th ed. so please bear with me; is the if ("ignore" in arguments.callee) return; below valid or a typeo? Thanks J. Code: function inspect(inspector, title) { var expression, result; // You can use a breakpoint to turn off subsequent breakpoints by // creating a property named "ignore" on this function. if ("ignore" in arguments.callee) return; ....... I have something like this var oneTest = new CustomObj({ prop1 : 'value1', prop2 : 'value2', prop3 : 'value3' }) var twoText = Object.clone(oneTest) twoText.prop2 = "newvalue2" And when I console log twoText I see something like +Data prop2 Inside Data is a prop2 that has the value of "value2". THAT is the one I want to change/override... yet the console shows me that the prop2 is outside of the data structure so when I am acting on the cloned obj I am not getting the results i need. I tried obj.extend etc.... and that didn't work, perhaps my syntax was wrong. Any advice? Not sure if I even ask correctly. Excuse the poor PHP man for not knowing javascript. I need to add a check to this code. It picks up an image when you click on it, then puts it down when you click again. What it needs is another check WHERE (on what) have you clicked to put it down. If it's a particular DIV then OK. If not (if elsewhere) don't put it down and don't change the click counter. Code: <html> <head> <style type="text/css"> .drag { position: relative; height:56px; width:56px; background-color:#FF0000; color:White; } </style> <script type="text/javascript"> var _startX = 0; // mouse starting positions var _startY = 0; var _offsetX = 0; // current element offset var _offsetY = 0; var _dragElement; var _oldZIndex = 0; // we temporarily increase the z-index during drag var _debug; var _countClick = 0; InitDragDrop(); function InitDragDrop() { document.onclick = OnMouseClick; document.onMouseClick = OnMouseClick; } function OnMouseClick(e) { debugger; _debug = $('debug'); // if first click this is zero if (_countClick == 0) { // IE if (e == null) e = window.event; // IE uses srcElement, others use target var target = e.target != null ? e.target : e.srcElement; _debug.innerHTML = target.className == 'drag' ? 'draggable element clicked' : 'NON-draggable element clicked'; // for IE, left click == 1 // for Firefox, left click == 0 if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag') { // grab the mouse position _startX = e.clientX; _startY = e.clientY; // grab the clicked element's position _offsetX = ExtractNumber(target.style.left); _offsetY = ExtractNumber(target.style.top); // bring the clicked element to the front while it is being dragged _oldZIndex = target.style.zIndex; target.style.zIndex = 10000; // set _dragElement for next click _dragElement = target; // tell our code to start moving the element with the mouse document.onmousemove = OnMouseMove; // cancel out any text selections document.body.focus(); // prevent text selection in IE document.onselectstart = function() { return false; }; // prevent IE from trying to drag an image target.ondragstart = function() { return false; }; //set click count to 1 so we know next click is to release _countClick = 1; // prevent text selection (except IE) return false; } } if (_countClick == 1) { if (_dragElement != null) { _dragElement.style.zIndex = _oldZIndex; // we're done with these events until the next OnMouseDown document.onmousemove = null; document.onselectstart = null; _dragElement.ondragstart = null; // this is how we know we're not dragging _dragElement = null; _debug.innerHTML = 'mouse up'; } //set click count back to 0 so next we know it's first click again _countClick = 0; } } function OnMouseMove(e) { if (e == null) var e = window.event; // this is the actual "drag code" _dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px'; _dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px'; _debug.innerHTML = '(' + _dragElement.style.left + ', ' + _dragElement.style.top + ')'; } function ExtractNumber(value) { var n = parseInt(value); return n == null || isNaN(n) ? 0 : n; } // this is simply a shortcut for the eyes and fingers function $(id) { return document.getElementById(id); } function OnMouseUp(e) { } </script> </head> <body> <div id="thediv" class="drag" style='background: url(shield.gif) no-repeat center top;'></div> <pre id="debug"> </pre> <div id="slot1" class="dropon" style='position: absolute; height:28px; width:28px; top: 200px; left: 200px; background-color:#FF0000; color:White;'></div> <div id="slot2" class="dropon" style='position: absolute; height:28px; width:28px; top: 200px; left: 230px; background-color:#FF0000; color:White;'></div> </body> </html> > 1. The fifth cell contains a drop-down selection list for the quantity of items ordered as the first child node of the table cell. > Store the reference to this selection list in the variable > `qtySelect`. > 2. Store the value of the selected option in the `qtySelect` object in the `newItem`'s `qty` property. > 3. Associate each selection list with a particular store item (you must do this because the table contains 13 different selection lists; > one for each store item) by adding a custom property to `qtySelect` > named `currentItem`, and set it equal to the `newItem` variable. > 4. Add an `onchange` event handler to `qtySelect` that sets the `qty` property value of the `currentItem` property to the value of the > selected option in the `qtySelect` selection list. ---------- I need help setting up the currentItem property so that newItem.qty updates properly when a different selection is made. function storeItem() { this.pid; this.descr; this.price; this.qty = 1; } function startShopping() { var tbody = document.getElementById("saltItems").tBodies[0]; var rows = tbody.rows; for (var i = 0; i < rows.length; i++) { var newItem = new storeItem(); var cells = rows[i].cells; newItem.pid = cells[0].innerHTML; newItem.prod = cells[1].innerHTML; newItem.desc = cells[2].innerHTML; newItem.price = cells[3].innerHTML; var selID = newItem.pid+"Qty"; var qtySelect = document.getElementById(selID); var index = qtySelect.selectedIndex; newItem.qty = qtySelect.options[index].value; } } example of one of the table rows: <tr> <td>FSSPJ11</td> <td>Fine Sea Salt</td> <td>Plastic Shaker Jar (11 oz.)</td> <td class="price">$4.15</td> <td><select id="FSSPJ11Qty"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </td> <td class="cartAdd"><input type="checkbox" id="FSSPJ11" /></td> </tr> hey, is there any way i can change an elements properties in window open? i click a link and it opens a window with window.open, and i want to take something from the current page and place it inside a textarea within the opened window.. is it possible? Hello everyone, I am fairly familiar with the concept of Objects and their properties and methods, but javascript being object based as opposed to object oriented has me stumped on how to access an object's properties from an onclick event handler created for another object created within the original object. In the example below, I have a constructor function called anyObj. to which I pass an object reference to an element. anyObj has 3 properties and one function increaseWidth() increaseWidth() creates a new button with an onclick event handler and this is where I have a problem. The onclick function needs to increase the value of anyObj's this.width property. I originally had a line this.width += 10; in the onclick but quickly realised why this wasn't working because the this in the onclick function refers to the new button object and not the this.width property of anyObj. The workaround I have used, and it works, is to make a copy of all the this.xxxxx properties. eg. width = this.width; and use the width variable in the onclick as you can see below. This "workaround" works fine but doesn't feel ideal to me. So, what I am asking advice on is, is there a better way to access the anyObj()'s properties from within the onclick function than the way I have done it? Obviously I would prefer to not have to make copies of all the anyObj() properties like I have to make them accessible to the onclick function. Code: function anyObj(divObj){ this.elem = divObj; this.width = 50; this.height = 50; this.increaseWidth=function(){ width = this.width; height = this.height; //create a button for this object to be appended to an element later on var newButton = document.createElement('button'); newButton.onclick=function(){ width += 10; //... //... } //... //... } } Hey everyone, I'm a newbie writing a tic tac toe program using OOP. It was simple setting it up so that a player could click on a box to put an X or an O there, but I've run into serious issues when trying to make it so a player couldn't overwrite the AI's choice and the AI couldn't overwrite the player's. An example of this would be if I made the top right box an X and the AI then made the center box an O, and then I accidentally clicked the center box and made it into an X. I want to prevent that. Every box on the grid is an object with the property of "taken" that helps the program know if a box is empty or not, so as to avert any overwriting in the first place. If the box is empty, this.taken = 0. If the box is filled by a player, taken = 1. If filled by AI, taken = 2. I made it matter whether it was AI or human so later i can check if one of them got tic tac toe. Anyway, by default the constructor class sets this.taken = 0. But the method for checking availability and writing the X or O uses a switch which checks if taken = 0. If it is, it sets taken to either 1 or 2 and writes the necessary symbol. If taken = 1 or 2, it just alerts the player that the spot is taken. But for some reason the switch statement can't tell when taken = anything other than 0. It always executes the code for 0 even though the code for 0 inherently makes it so that taken never equals 0 again, which means case 0 cannot happen anymore. Below is the code with notes. Code: function main(input){//start of main function// function Click(who, where, what){ //this is the method for checking if it's taken or not and writing the X or O if it isn't// /*the argument who represents a number. 0 is no one, 1 is human, 2 is AI; where is a string literal representing the spot on the grid*/ switch(this.taken){ case 0: this.taken = who; document.getElementById(where).innerHTML = what; break; case 1: alert("this spot is taken"); break; case 2: alert("this spot is taken"); }//end switch }//end Click function Box(inputhere){//start of class// this.taken = 0; this.pick = Click; } //end of Box class// //object declarations (I cut out most of them and left only the relevant ones// var topleft = new Box(); var topmid = new Box(); var topright = new Box(); var centerright = new Box(); //end of object declarations// switch (input){ /*in each .pick(), the first arg is whether or not a player chose it (1 = player did, 2 = comp did). The second arg is which box and the third is whether to put an X or O. The input variable in the switch statement is an argument passed through main() when the player clicks on a box. Topleft passes 1.1, topmid passes 1.2 and so on.*/ case 1.1:{ //The first instance of .pick() in each case is what the player did. The second is what the AI will do in repsonse.// topleft.pick(1, "topleft", "X"); topmid.pick(2, "topmid", "<span>O</span>"); break; }//end of case 1.1 case 1.3:{ topright.pick(1, "topright", "X"); centerright.pick(2, "centerright", "<span>O</span>"); break; }//end of case 1.3 }//end of switch }//end of main// Is there anyone who has any idea why on earth this is happening? I've been at it for an embarrassing amount of hours. Also, thanks to anyone who even considers helping : ) (feel free to flame me if my code sucks or my post is too long or anything). Hi! I have encountered a problem with IE that I'm simply unable to solve. I have a form where the user can choose different things to input from a drop down list and depending on the choise, different kinds of textboxes of text areas etc. are loaded onto the page with JS. After the user has finished inputing text and submits the form, I read the input with PHP and process it further. Now, this works perfectly in firefox but IE doesn't seem to add the name properties to the elements (both textboxes and text areas) because PHP cannot find them and no info is printed from the input. The creation of the elements (adding them to the page...) works just fine, it's just getting the data from them that's the problem. Since it works in FF I know it's not a PHP problem. I've used the recommended .name to set the property (although I've also tried .setAttribute() etc), yet it still doesn't work. What can I do to solve this? My relevant JS code: Code: function addTextbox(idName, head) { var target = document.getElementById('addThings'); var newDiv = document.createElement("div"); newDiv.id = "container"; newDiv.name = "container"; newDiv.setAttribute("className", "intNew"); //IE newDiv.setAttribute("class", "intNew"); //FF var newTextbox = document.createElement("input"); newTextbox.type = "text"; newTextbox.id = idName; //-- newTextbox.name = idName; //Doesn't work in IE?.. newTextbox.setAttribute("className", "newWidth"); //IE newTextbox.setAttribute("class", "newWidth"); //FF var text = document.createTextNode(head + ":"); target.appendChild(newDiv); newDiv.appendChild(text); newDiv.innerHTML += "<br />"; newDiv.appendChild(newTextbox); newDiv.innerHTML += "<p />"; } (The text area function is the same, more or less) The PHP code, if anyone's interested: Code: if($_POST['createBtn']) { $head = $_POST['head']; //1 $intro = $_POST['intro']; //2 $question = $_POST['question']; //3 $answer = $_POST['answer']; //3 $image = $_POST['image']; //? $author = $_POST['author']; //5 $end = $_POST['end']; //4 //sammanfattning printHTMLTop(9); $today = date('Y-m-d'); $text = <<<END <div class="intContainer"> <div class="intHeadRow"><b>$head </b></div> <div class="stpdIEContainer"> <div class="intTextContainer"> <p /> $intro <p /> END; if($question != "" && answer != "") { foreach($question as $k) { $text .= $k . "<p />"; foreach($answer as $j) { $text .= $j . "<p />"; } } } $text .= <<<END <p /> $end <p /> <i>Skrivet av: $author den $today</i> </div> <!-- intTextContainer --> <div class="intImgContainer"> </div></div> <!-- stpdIEContainer --> </div> <!-- intContainer --> END; //Prints to new file (on server) $file = file_put_contents('interviews/interview01.html', $text); //Set name //Add to DB //print newly created file $page = file_get_contents('interviews/interview01.html'); echo $page; printHTMLBottom(); |