JavaScript - Set Style Attribute In Nodes

what's the fastest or easiest way to get all comment nodes into an Array?

the solution only needs to work in ie8/w3 if that helps.

I have your typical AJAX function that doesn't seem to be working quite well. :<

Here's the relevant portion of the StateChange function:

Code:

function StateChange()
{
  if(ttajax.readyState==4)
  {
    xmlDoc=ttajax.responseXML;
    if (!xmlDoc) {return;}

    var x=xmlDoc.documentElement.childNodes;
    var AlertVal = '';
    for (var i=0;i<x.length;i++)
    { 
      if (x[i].nodeType==1)
      {
        AlertVal += x[i].nodeName + ": " + x[i].firstChild.nodeValue + "\n";
//        AlertVal += x[i].nodeName + ": " + x[i].childNodes[0].nodeValue + "\n";
      } 
    }
    alert(AlertVal);


    var gameid = xmlDoc.getElementsByTagName('gameid')[0].childNodes[0].nodeValue;
    // Other ****
  }
}

Note the testing function there... It DOES return the Node Name! However, the firstChild/childNodes[0] is "null", and I cannot pull the nodeValue from it. :<

Here is a sample XML bit it's being tested on:

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
  <game>
    <gameid>16</gameid>
    <turn>24262</turn>
    <notturn>15010</notturn>
    <dateline>1275511672</dateline>
    <hcount>6</hcount>

    <ccount>4</ccount>
    <turn_html><![CDATA[
--Snipped--
]]></turn_html>
    <board_html><![CDATA[
--Snipped--
]]></logs_html>

    <cactivate>60580</cactivate>
    <cactivate>65401</cactivate>
    <cactivate>78720</cactivate>
    <cactivate>80275</cactivate>
    <sactivate>0</sactivate>
    <sactivate>1</sactivate>

    <sactivate>2</sactivate>
    <sactivate>3</sactivate>
    <sactivate>4</sactivate>
    <sactivate>5</sactivate>
    <sactivate>6</sactivate>
    <sactivate>7</sactivate>

    <sactivate>8</sactivate>
  </game>

Any help would be appreciated, thanks.

I am trying to write a little Greasemonkey script to insert links to open mp3s in the Google Player. It is supposed to insert "(play)" next to these links. (play) is a span element consisting of a text node "(", a link/"a" element, and another text node ")".

However, instead of inserting these new links next to each old link, it is putting them all in a row next to the very first mp3 link!

For example, if there are 3 mp3 links found on the page, the following is inserted next to the first links: (play(play(play)))

When the loop iterates over the whole array (i < links.length), the browser hangs until Firefox's slow script notification pops up and I click "Stop script"; then I see the nested links all next to the first mp3 link.

Additionally, the url itself is strange. Just looking at it, you'd think I was running a recursive function, but I'm not! The URL with a limited for loop (x < 21): http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://www.hackerpublicradio.org/eps/hpr0924.mp3&autoPlay=true&autoPlay=true&autoPlay=true&autoPlay=true&autoPlay=true&autoPlay=true&autoPlay=tru e.

Here is the script. I have been using the site http://www.hackerpublicradio.org for my testing.
Code:

var links = document.getElementsByTagName('a');
for (var i=0; i < links.length; i++) {
	var x = links[i];
	var url=x.href;
	if (url.search(/.*\.mp3/i) != -1) {
		var plink = document.createElement("a");
		plink.href = "http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=" + url + "&autoPlay=true";
		plink.target = "_blank"; //open in new tab
		plink.appendChild(document.createTextNode("play"));
		
		var pspan = document.createElement("span");
		pspan.style.fontSize = "90%";	
		var openb = document.createTextNode("(");
		var closeb = document.createTextNode(")");
		pspan.appendChild(openb);
		pspan.appendChild(plink);
		pspan.appendChild(closeb);

		x.parentNode.insertBefore(pspan, x.nextSibling); 
	}
}

No errors are showing up in the console. I've only tested it in Firefox 10. Please help me figure out where I'm going wrong!

So there is this string i need to parse as xml:
Code:

<station><code>GB0923A</code><city>ABERDEEN</city><population>215.000</population><component><name>Nitrogen dioxide (air)</name><unit>_micro;g/m3</unit></component><component><name>Nitrogen oxides (air)</name><unit>_micro;g NO2/m3</unit></component></station>

Now what I do is:
-use this function to create xml doc from string
Code:

function stringToXML(text){
if (window.DOMParser)
{
   parser=new DOMParser();
   xmlDoc=parser.parseFromString(text,"text/xml");
}
else // Internet Explorer
{
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async="false";
  xmlDoc.loadXML(text);
} 
return xmlDoc;
}

-display it in that if statement:
Code:

if (xmlhttp.readyState==4 && xmlhttp.status==200){
        var response= xmlhttp.responseText;
	xmlDoc= stringToXML(response);
	var text="";
	text= text+ xmlDoc.getElementsByTagName("city")[0].nodeValue + "<br/>";
	text= text+ xmlDoc.getElementsByTagName("code")[0].nodeValue + "<br/>";
	text= text+ xmlDoc.getElementsByTagName("population")[0].nodeValue + "<br/>";
	document.getElementById("test").innerHTML = text;
	document.getElementById("loading").style.display = "none";
}

the stirng shown at the beggining is passed to "response" (var response= xmlhttp.responseText.
Now for some reason all 3 values displayed are null...
I am trying to figure why for last 2hrs but i cnt see any reason why they shouldnt be the actual values of nodes in the string...
Any help would be appreciated.

i am interested in using RaphaelJS for creating VML/SVG rounded corners etc, but unless i physically put the <script> right after the element to which it needs to be applied, i have to rely on the single DOM load() event. which causes a delay before any script is executed,...thus a FOUC (flash of unstyled content).

i'm guessing there is no way to track when individual elements are loaded into the DOM via a CSS filter or similar, or another way around this other than having <script> in the body or just dealing the the load delay?

thanks,
Leon

I'm developing a simple game that involves a system of interconnected nodes with unidirectional travel between nodes (similar to the circulation system!). The goal of the game is to get from a starting node to an ending node, which can be a variable number of nodes away.

The program picks a random starting point, then randomly chooses one of its connecting nodes (cNodes) and pushes it onto a pathArray. A cNode is randomly chosen from this new node and it is pushed onto the pathArray. This continues for a designated number of turns, thus generating a pathArray (invisible to the player). The last element in the pathArray is the endNode and the goal of the puzzle.

At each node the player is given two options of travel (though there may be more than two ways to go). One of these options MUST be the correct way if the player has not deviated from the path up until that point. If the player has deviated, this option can be any cNode. The other node is any cNode that does not lead to the endNode.

The following code contains a simplified list of nodes that represents the content in my game. The function, however, is taken word for word. In this snippet, the pathArray & startNode have already been generated and I am trying to resolve how to assign "nodeChoice" as either the correct direction of travel (for a player on the correct path) or any random cNode (for a player who has deviated from the path). Keep in mind that the pathArray and cNodes lengths can be any size.

Code:

<script>

//NODES:
var nodeA = {name:"A"};
var nodeB = {name:"B"};
var nodeC = {name:"C"};
var nodeD = {name:"D"};
var nodeE = {name:"E"};
var nodeF = {name:"F"};
var nodeG = {name:"G"};
var nodeH = {name:"H"};
var nodeI = {name:"I"};
var nodeJ = {name:"J"};
var nodeK = {name:"K"};
//An array of all nodes in the system:
var systemArray = [nodeA, nodeB, nodeC, nodeD, nodeE, nodeF, nodeG, nodeH, nodeI, nodeJ, nodeK];

//Connecting Nodes (cNodes):
//(uni-directional, but cyclical)
nodeA.cNodes = [nodeB, nodeC];
nodeB.cNodes = [nodeD, nodeE, nodeF];
nodeC.cNodes = [nodeF, nodeG];
nodeD.cNodes = [nodeI, nodeH];
nodeE.cNodes = [nodeJ];
nodeF.cNodes = [nodeK];
nodeG.cNodes = [nodeK];
nodeJ.cNodes = [nodeA];
nodeK.cNodes = [nodeA];
nodeI.cNodes = [nodeA];
nodeH.cNodes = [nodeA];

//The path chosen (generated from code not included here)
var pathArray = [nodeA, nodeB, nodeE, nodeJ];

//nodeChoice will represent a cNode from any given node
var nodeChoice;

//chooseNode is supposed to assign nodeChoice the next element in pathArray if the player on on the right path (if at nodeB, nodeChoice = nodeE).
//However, if the user has taken a different path, its cNodes will not be in pathArray in which case a random cNode is assigned to nodeChoice
function chooseNode(_node) {
	//check each cNode to see if any are in pathArray
	for (var j = 0; j < _node.cNodes.length; j++) {
		//if a cNode is in pathArray, then we know to assign it nodeChoice...
		if (_node.cNodes[j] in pathArray) {
			nodeChoice = _node.cNodes[j];
			console.log("choiceNode CORRECT: " + nodeChoice.name); //(for debugging purposes only)
		}
		//...otherwise don't do anything in this forLoop/ifStatement
	};
	//if by this point nodeChoice is still undefined, meaning none of the current node's cNodes are in pathArray, assign it any one of its cNodes.
	if (nodeChoice == undefined) {
		nodeChoice = _node.cNodes[Math.floor(Math.random()* _node.cNodes.length)];
			console.log("choiceNode INCORRECT: " + nodeChoice.name);//(for debugging purposes only)
	};	
};

//Runtime:

chooseNode(nodeB);
//Result should be only nodeE.name since nodeD is not in the pathArray...
console.log(nodeChoice.name);

</script>

...however, nodeChoice is assigned either D, E or F randomly and we are given the troubleshooting statement "choiceNode INCORRECT: D (or) E (or) F", indicating that the if-in statement is always ignored.

I know that the if-in statement doesn't work but am not sure how else to write it so that each cNode is compared the each element in pathArray, both of which can be of variable lengths...

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!

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,

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

How would you access information about various attributes of an element with javascript?

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!

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

I just stucked somewhere in js, i know its simple task but i don't know what's wrong but i believe i just need little guidance to get my result.
Here is my problem

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
function OfferTwo(){
var Name = document.getElementById("txtName").value;
var Email = document.getElementById("txtEmail").value;
var sUrl = document.getElementById('offer2').src;
document.getElementById('offer2').src = 'http://www.getmyname.com?info.php?dp=0&l=0&p=0&Name='+Name+'&email='+Email;
alert(document.getElementById('offer2').src);
}
</script>
</head>

<body>
<form name="myFrom" method="get" action="">
  <p>Name 
    <input name="txtName" type="text" id="txtName">
  </p>
  <p>Email 
    <input name="txtEmail" type="text" id="txtEmail">
  </p>
  <p>Yes 
    <input type="radio" name="rb" value="radiobutton" onClick="OfferTwo();">
    No
    <input type="radio" name="rb" value="radiobutton">
  </p>
</form>
<iframe name="offer2" id="offer2" src="" height="500px" width="100%" frameborder="0" scrolling="no">Your Browser not supporting</iframe>
</body>
</html>

what i am trying to do on radio click 'YES' option i pass the value into querystring. Till now i got sucess to pass values but now problem is that how i pass this value into iframe src element.

I tried alot did lot of googling but didn't get anything yet.

Please help me, i know its very basic thing but i didn't trace my mistake.

Thanks i n advance