Solved

javascript oo: passing object

Posted on 2009-03-30
3
211 Views
Last Modified: 2012-05-06
I want to create a button where you can choose for 5 possibilities.(1-5)
see attach. When onover the choosen 'subbutton'  lights up and when you click the 'light' stays on.

I've created a object button with three objects. the object nfo keeps the onover en clicked situation
With these 2 properties the object rbutton shows een gif (03.gif)

problem: in the function onover I can't change any property of the nfo object or read it.

I know the code is a little messy but I tried a lot of things.

Any ideas?
// JavaScript Document
 
var knop1 = new button('a',100,100)
 
function button(nm,x,y){
		
	this.name = nm
	
	bg = new rbutton(this,x,y)
 
	nm1 = new sbutton(this,nm+'1',1,x+59,y+12,bg);
	nm2 = new sbutton(this,nm+'2',2,x+71,y+50,bg);
	nm3 = new sbutton(this,nm+'3',3,x+41,y+73,bg);
	nm4 = new sbutton(this,nm+'4',4,x+10,y+50,bg);
	nm5 = new sbutton(this,nm+'5',5,x+21,y+12,bg);
 
	nfo = new info()
}
 
function  info(){
	
	this.clicked = 0
	this.over = 0
	
	}
 
function rbutton(nm,x,y){
	
    var newNode = document.createElement("div");
    newNode.setAttribute("id", nm);
    newNode.setAttribute("style", "visibility: visible;");
    document.body.appendChild(newNode);
	var deknop = document.getElementById(nm);
  	deknop.style.position = "absolute";
  	deknop.style.left = x + "px";
  	deknop.style.top = y + "px";
 
	onover(nm,0,0)
 
}	
 
	info.prototype.setclicked = function(res) {
	nfo.clicked = res
 
}	
 
 
info.prototype.setover = function(res) {
 
	alert("res: "+res)
	
	nfo.over = res
	
	alert("FGGGGG")
	
}
 
 
	info.prototype.alertClass = function() {
	alert(this.clicked + " " + this.over);
}
	
function sbutton(prnt,nm,nr,a,b,bg_){
 
	//alert(nfo.clicked)
	//alert("bg_.name: " + bg_.clicked)
	//p = prnt.getparent(nm)
    var newNode = document.createElement("div");
    newNode.setAttribute("id", nm);
    newNode.setAttribute("style", "visibility: visible;");
	newNode.setAttribute("onmouseover", "onover('" +prnt+"',"+ nr +")");
	newNode.setAttribute("onmouseout", "onover('" +prnt+"',0)");
	newNode.setAttribute("onmousedown","clickit('" +prnt+"',"+nr+")");
    document.body.appendChild(newNode);
	var deknop = document.getElementById(nm);
	
	deknop.style.backgroundColor = "";
  	deknop.style.position = "absolute";
  	deknop.style.left = a + "px";
	deknop.style.top = b + "px";
	deknop.style.width = "20px";
	deknop.style.height = "20px";
	deknop.innerHTML = "<span align='center'>&nbsp;&nbsp;"+nr+"&nbsp;&nbsp;</span>";
	deknop.style.cursor='pointer'
	
  }
  
function clickit(nm,nr){
	
	alert("nr: " +nfo.clicked)
	nfo.setclicked(nr)
	alert("bg.clicked: " + nfo.clicked)
	nfo.setover(nr)
	alert("over: " +nfo.over)
	onover(nm,nr)
	
 
 }
 
function onover(nm,nr){
	
	//alert(nfo.clicked)
	document.getElementById(nm).innerHTML= "<img border='0px' src='"+ nr + nr + ".png'>"
	}

Open in new window

13.gif
0
Comment
Question by:bdbsailor
  • 2
3 Comments
 
LVL 4

Expert Comment

by:jwmcpeak
ID: 24018405
Change nfo.over = res to this.over = res.
0
 
LVL 4

Expert Comment

by:jwmcpeak
ID: 24018418
And from looking further, it looks like setClicked and setOver suffer from the same problem: nfo doesn't exist in their scope. Change nfo to this in both of those methods, and it should work.
0
 

Accepted Solution

by:
bdbsailor earned 0 total points
ID: 24018589
jwmcpeak:: I changed that
info object nfo is not recognized in function onover, not a problem in function clickit
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question