JavaScript - What's The Correct Way To Set An Attribute On A Dom Object?

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)

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 ();

Quote:
menu: function( a, b ) {
$( b ).observe( 'click', function( event ) {
event.stop();
if( $( a ).visible() ) {
$( a ).hide();
$( b ).removeClassName( 'selected' );
document.stopObserving( 'click' );
} else {
$( a ).show();
$( b ).addClassName( 'selected' );
document.observe( 'click', function( e ) {
if( e.target.id != a && e.target.id != b && !Element.descendantOf( e.target, $( a ) ) ) {
$( a ).hide();
$( b ).removeClassName( 'selected' );
document.stopObserving( 'click' );
}
});
}
});

$$( '#' + b + ' > a' ).each( function( element ) {
element.observe( 'click', function( event ) {
$( a ).hide();
$( b ).removeClassName( 'selected' );
document.stopObserving( 'click' );
});
});
}
This work's perfrect accept when i use it with others on the menu it leaves the other ones open, how do i get it to close the open one when i open a new menu..

Thanks.

Hello.

Is there any way to get the variable name of an object from inside the object?

E.g.

PHP Code:
function Bla(){

    this.write = function(){
    document.write(<objectname>);

    }

}

obj1 = new Bla();
obj1.write(); //Outputs obj1 



Here is my script:

PHP Code:
function myTimer(seconds, obj){
    this.seconds = seconds;
    this.obj = obj;
    this.startTimer = function(){
        if(this.seconds>0){
            this.seconds--;
            this.obj.innerHTML = this.seconds;
            this.timer = setTimeout("Timer.start()",1000);
        }
    }

}
Timer = new Timer(10, obj);
Timer.startTimer(); 



Now the problem is that the variable that contains the object must be named "Timer".

This way I cannot create new timer objects with different variable names

I have tried:
this.timer = setTimeout("this.start()",1000);
but it doesn't work.

That's why it would be good to detect the variable name and instead use something like this:
this.timer = setTimeout(varname+".start()",1000);

I would rather not have to pass the variable name through a parameter like this:
Timer1 = new Timer(10, obj, "Timer1");

Thanks in advance.

ok guys, i am not very saavy with javascript and I dont know if this is an easy fix or something difficult, but here is my plan. I would like to have 4 divs with content in each and set each to occupy the same web space through absolute positioning.

The .js would be for me to have three divs with a display:none and one to have display:block. and then at a set interval, have the divs switch role so that one that was display none is then block and the others are hidden.

I dont want to have a page reload and I dont want to work in flash or anything like that, I just need an example of a script that will alternate through a set array of div ids (i.e. "<<div id="ad1"></div> div id="ad2"></div> <div id="ad3"></div> <div id="ad4"></div>, and change the display attribute every 10 seconds or so.

Any help would be greatly appreciated thanks so much

Hi,

I'm using JavaScript to check (or leave empty) a checkbox based on stored data.

Code:

 for (var q=0;q<document.Simple.Subject.length;q++) {
if (document.Simple.Subject[q].value == document.Restored.Subject.value) {
document.Simple.Subject[q].checked = true; break; }

It works perfectly, but I've discovered that it adds a simple "checked" to the form:
Code:

<input type="checkbox" name="Subject" value="Math" checked />

... I thought I read that checked is not proper... it the attribute should really be checked="checked" .

Is there a way to tweak this with JavaScript?

Thanks.

~Wayne

I am aiming to change a couple of items on a CSS definition using JavaScript, so the servicer only needs to update one JS variable. I am so a novice at this...

I would like to be able to set the "top" and "height" attributes of my graphbar ID element after the percent in the JS script is changed.

Here's the js and CSS that is pertinent:

Code:

var btmrtx= 380;
var btmrty= 280;
var tplftx= 40;
var tplfty= 20;
var totalheight= (btmrty)-(tplfty);

<!----  Here is the number or percentage of surveys done as a decimal. This you enter into this script for every update! -->
var pctdone= .34;

var barpixels= totalheight*pctdone;
var newtoplfty = btmrty - barpixels;

Code:

#graphbar {
	background:#dd6000;
	position:relative;
	float:left;
	width: 20px;
	height: 36px;
	left: 40px;
	top: 244px;
	
}

I don't even know where to begin on a function.
Thanks for help!

Hi,

The following doesn't work:

Code:

<!DOCTYPE HTML>
<title>Sample flash</title>
<embed id="foo" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" />

<script type="text/javascript">
document.getElementById("foo").setAttribute("bgcolor", "#00FF00");
</script>

But if you change setAttribute to ("width", "800"), it works with no problem! What am I missing?

Any help is appreciated!
Mike

Hello!

I have a superclass where I create a "div" element as a property and then proceed to try and set the element's "id" attribute in a subclass.

Interestingly, if I create multiple instances of the subclass with different "id"s, they all end up having the last "id" I specify. I would like it if they retain the individual "id" I specify.

Here is the code.

Code:

function Drag() {
	this.ele = document.createElement("div"); }

function Icon(id) {
	this.ele.id = id; }

Icon.prototype = new Drag();

var hello = new Icon("hello");
var goodbye = new Icon("goodbye");

Hi all,
I have the following code:
Code:

<html>
<head>
<title>Page Title</title>
<script type='text/javascript'>
mymusic=[];
tracks=[];
mymusic=[{title:"a",artist:"b",artwork:"c",tracks:[{tracktitle:"d",trackmp3:"e"},{tracktitle:"x",trackmp3:"z"}]},{title:"f",artist:"g",artwork:"h",tracks:[{tracktitle:"i",trackmp3:"j"}]}];

function nowplaying(trackindex,albumindex){
q+="<html><head></head><body><p>Song:</p>";
q+="<p>"+mymusic[albumindex].tracks[trackindex].tracktitle+"</p>";
q+="<p>from Album:</p>";
q+="<p>"+mymusic[albumindex].title+"</p>";
q+="<img src=\""+mymusic[albumindex].artwork+"\">";
with(document.getElementById('nowplays').contentDocument){
	open();
	write(p);
	close();
}
}

function anything(i){
p="";
p+="<html><head></head><body><form><select onchange='parent.nowplaying(this.selectedIndex,i);' size='";
p+=mymusic[i].tracks.length+1+"'>";
p+="<option>Choose a song...</option>";
for(j=0;j<mymusic[i].tracks.length;j++){
	p+="<option>"+mymusic[i].tracks[j].tracktitle+"</option>"};
p+="</select></form></body></html>";

with(document.getElementById('songs').contentDocument){
	open();
	write(p);
	close();
}
}


function showinitial(){
	s="";
	s+="<html><head></head><body><form><select onchange='parent.anything(this.selectedIndex-1);' size='";
	s+=mymusic.length+1+"'>";
	s+="<option>Choose an artist...</option>";
	for(i=0;i<mymusic.length;i++){
		s+="<option>"+mymusic[i].title+"</option>"};
	
	
	s+="</select></form></body></html>";
	alert(s);
with(document.getElementById('albums').contentDocument){
	open();
	write(s);
	close();
	}
}



</script>
</head>
<body onload="showinitial();">
<style type='text/css'>
div                { padding:0;margin:0; }
.container         { position:relative; width:100%; height:100%;  }
.topcontainer      { height:65%; }
.box               { float:left; width:32%; height:90%; padding:5px; border:1px solid black; overflow:scroll; }
.bottom            { height:35%; border:1px solid black;  }
</style>
 <div class="container">
     <div class="topcontainer">
        <div class="box"><p>Albums:</p><iframe id='albums'>hi </iframe></div>

        <div class="box"><p>Songs:</p><iframe id='songs'></iframe></div>
        <div class="box"><p>Now Playing:</p><iframe id='nowplays'></iframe></div>
     </div>
     <div class="bottom"></div>
 </div>

</body>
</html>

which, as you will see if you run it, creates an iframe-based media player based on a collection of albums, and songs within these albums (I just used letters to define these albums and songs in the mymusic array, for simplicity). Focusing on the top 3 iframes, the way I have set out the user interaction is to generate the HTML for forms of available albums and songs using Javascript, and write them to the iframes in the body. This nearly works fine: if you run it and make a selection in the 'Albums' menu, you will see that the options this causes to display in the 'Songs' menu correspond with the mymusic array, so this works. However, when I choose a song, the function "nowplaying(trackindex,albumindex)" should be called using an onchange event in the 'Songs' form, in the exact same way as in the form generated using "showinitial()"...but the function isn't called. I have ruled out the coding of "nowplaying" itself as a cause, because even when I change "nowplaying" to sth simple like alert("hello"), with no variables or anything being passed in, it still doesn't call. So this leads me to think the problem is with the onchange attribute in "anything", but I can't see what the problem is. The way I coded it is no different to before, and that worked fine, so why won't this work?

Any help would be much appreciated!

I need to write a script that will search for a style attribute that matches "top: 10px;".
If a match is found, it will then edit the value of that input box to "hello".

So for example a webpage has:
Code:

<input style="top: 1px;" maxlength="20" type="text">
<input style="top: 100px;" maxlength="20" type="text">
<input style="top: 10px;" maxlength="20" type="text">

The script would edit the value of the 3rd one to "hello".

I'm a beginner to javascript so my code may not make sense but bear with me please.

Code:

var styles = document.getElementsByTagName("input").attributes.getNamedItem("Style")

for (var i = 0; i < styles.length; ++i){
	if (styles.value == "top: 179px; left: 348px; width: 222px;"){styles.value="hello"}
	}

how can i get the number values from style atrributes. currently i have test_tree.style.top which would return 50px instead of 50, is there anyway i can take just the 50 as an integer

When overlay(url) is fired theAgree.href is not being updated with theURL. theURL is being passed correctly, but in IE8 and below it never updates the ID "agree" with the URL. So when you click the "agree" link it just opens a new window using what's in the href which is #.

In all other browsers the JS below will rewrite the "agree" URL with the URL that's sent to overlay(). But of course, not in IE8 and below.

Code:

function overlay(url) {
	var theURL = url;
	var theAgree = document.getElementById('agree');
	theAgree.href = theURL;
	var theOverlay = document.getElementById('overlay');
	theOverlay.style.visibility = (theOverlay.style.visibility == "visible") ? "hidden" : "visible";
}
function overlay_close() {
	var theOverlayClose = document.getElementById("overlay");
	theOverlayClose.style.visibility = "hidden";
	theOverlayClose.style.display = "none";
}

Code:

<map name="Map" id="Map">
	<area shape="rect" coords="382,1,573,237" onclick="overlay('http://site3.com'); return false;" href="#" />
	<area shape="rect" coords="192,0,383,236" onclick="overlay('http://site3.com'); return false;" href="#" />
	area shape="rect" coords="2,1,193,237" onclick="overlay('http://site3.com); return false;" href="#" />
</map>

Code:

<a name="agree" id="agree" href="#" onclick="overlay_close()" target="_blank" class="button">

Page: http://www.libertyvillesavingsbank.c...c-studio-card/