Solved

javascript oo: passing object

Posted on 2009-03-30
3
208 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now