JavaScript - Value Attribute Script?

I got this code

Code:

   Div= document.createElement("div");
	 Table= document.createElement("table");
	 Table.setAttribute("style","width:100px;height:100px;background-color : #708090;");
 	 Table.setAttribute("bgColor","#708090");
	 tr=document.createElement("tr");
	 td=document.createElement("td");	
	 text=document.createTextNode(aText); 
	 myTableBody = document.createElement("TBODY")
	 td.appendChild(text); 	 
	 tr.appendChild(td); 
	 myTableBody.appendChild(tr); 
	 Table.appendChild(myTableBody); 
	 Div.appendChild(Table); 		  

   document.getElementsByTagName('body').item(0).appendChild(Div);

Now it all works fine with the exception of the
Code:

	 Table.setAttribute("style","width:100px;height:100px;background-color : #708090;");

so I was wondering how do I set the style attribute in the table node?

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

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"}
	}

Which of these is the correct way to set the className attribute, or are they both okay?

option 1:
Code:

var t = document.createElement("p");
t.className = "myclass";

option 2:
Code:

var t = document.createElement("p");
t.setAttribute("class","myclass");

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/

Right, so there are a bunch of links in this format:
<a href="/profiles/########">username</a>

I'm using greasemonkey, and what I want to do is go through and get all of the /profiles/######## part of the anchor tag. I'm using Regex and I can't seem to get a match.

This is what I have so far:
Code:

function ok() {
var names = document.getElementsByTagName('a');
var reg = new RegExp("WHAT GOES HERE?");
var e = "links:\n";

var i = 0;

while(i<10) {
e += reg.exec(names[i].href) + "\n";
i++;
}


alert(e);
}

ok();

what is actually desired is I want there to be a way I can select these somehow as well..

I have tried to manipulate attributes in a specific class & am successful by using jquery. Now for the purpose of learning I want coders to look at my simple snippet & tell me how can I use functions namely getElementsByTagName & For loop instead of each.

http://jsfiddle.net/defencedog/Zz7cX/

[My snippet adds 'fullscreen' functionality to youtube vids, which unfortunately isn't present in default phpBB3 forum engine]

regards;;

I am trying to get my script working in FF, IE and Opera
but the getAttribute isn't working for me.

The domain name isn't getting picked up

I have tried this:

var dom_name = document.getElementById('dom_nm').getAttribute("value",2);

and this:

var dom_name = document.getElementById('dom_nm').getAttribute('value');


After this I use the domain name like this:

Code:

if (per2 == 0) {
  item_desc = "Domain Name and DNS set up. Domain: "+dom_name+" Period: "+per1+"year"+" No Privacy.";
 }

if (per2 > 0){
  item_desc = "Domain Name and DNS set up. Domain: "+dom_name+" Period: "+per1+"year"+" Including: Privacy: "+per2+"year.";
}

   
document.getElementById('item_pay').setAttribute("value","item_desc");

( I also tried:

Code:

document.getElementById('item_pay').setAttribute('value') = item_desc;

but that didn't seem to work either )


The HTML is like this:

Code:

<div style="margin: 5px auto;">
<table>
	<th>Your New Domain Name Order</th>
	 <tr><td>Product</td><td>Cost</td><td>Years (max. 10)</td><td style="text-align: right;">Total Cost</td></tr>
	 <tr><td id="dom_nm" value="John.Doe"><?php echo "Domain: $N_dom.$N_tld" ?></td><td id="price" value = '<?php echo "$priceN" ?>' ><?php echo $priceN ?></td><td><input style="background-color: yellow; font-weight: bold;" type='TEXT' id="per_1" size = '10' value = '<?php echo "$period_1" ?>' ></td><td><input type='TEXT' id="total_1" style="text-align: right;" value = '<?php echo "$total_1" ?>'></td></tr>
	<tr><td>Domain Privacy</td><td>8.70</td><td><input style="background-color: yellow; font-weight: bold;" type='TEXT' id="per_2" size = '10' value = '<?php echo "$period_2" ?>'></td><td><input type='TEXT' id="total_2"  style="text-align: right;" value = '<?php echo "$total_2" ?>'></td></tr>
	<tr><td>Total Order.</td><td> --- </td><td> --- </td><td><input type='TEXT' id="total_3"  style="text-align: right; font-weight: bold;" value = '<?php echo "$total_3" ?>'></td></tr>
</table>
</div>

The result is that I get a zero ( 0 ) where the domain should be.

Like this:
Domain Name and DNS set up. Domain: 0 Period: 2year Including: Privacy: 2year. Plus Free Blog Install.


Any ideas what I am doing wrong ?

Thanks

Hello all,

First time back here in a while, but I'm trying to get proficient in JS.

I want to make my input element reset its value attribute to blank, which is originally set to "your e-mail". You know the effect you see on forms that have text in them, then with the onclick attribute, you can clear the text in the box.

So, after looking around trying to find out what to do, here's what I've attempted.
HTML
Code:

<form id="emailbox" name="form1" method="post" action="">
    	<div>
            <input type="text" name="go" id="go" value="your e-mail" onclick="removeText()"/>
            <input type="submit" value="Join" />
        </div>
    </form>

JS:
Code:

<script type="text/javascript">
function removeText(){
	var form = document.getElementById['emailbox'];
	var name = form.elements['go'].value;	
}
</script>

What do I do next to complete my objective?

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 believe this is something simple that I'm missing. I'm still fairly new to both js and php (and this may be a better question for the php forum - hopefully it makes sense though).

What I have is a js function which uses the date/time to generate a 'unique' number onLoad, and places this number in the HTML as text in a <td></td>. This works fine. I'm also doing the same thing with the value attribute of a <input type="hidden"> element, which also works fine. The problem is, when I submit my form, php refuses to echo the value (but reports no errors). Here is all the relevant code:
The HTML:
Code:

<td class='dandt' id='iquotenum' colspan='2'></td>

The Javascript:
Code:

 function loaded()
	{
	var d = new Date();
	var vqtnum = document.getElementById("quotenumber");
	var iqtnum2 = document.getElementById("iquotenum");
	var vqtdat = document.getElementById("quotedate");
	
	vqtnum.innerHTML = "" + (d.getMonth()+1) + d.getDate() + d.getFullYear() + "-" + d.getSeconds();
	iqtnum2.innerHTML = "<input type='text' name='iqtnum' id='iqtnum' value='" + (d.getMonth()+1) + d.getDate() + d.getFullYear() + "-" + d.getSeconds() + "'></input>";
	vqtdat.innerHTML = "" + (d.getMonth()+1) + "/" + d.getDate() + "/" + d.getFullYear();
	}

The PHP:
Code:

<?php
$iqtnum = $_GET['iqtnum'];
		echo "<tr><td>Quote Number: </td><td>" . $iqtnum . "</td></tr>";
?>

I've verified by using Chrome's inspect element tool that the value attribute is being set correctly by my script, and I've got a few other php echos that get the user's input from other text boxes which use the same method*, and which work fine. Also while debugging I changed the type from hidden to text so I can see it easier.

*Except that the value in this case is typed into the box, rather than generated by js.

Thanks in advance.

edit: I forgot to mention that I also have in the body tag of the HTML onLoad="loaded()".

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

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

Hello team,

I have a quick question in JS. Might sound silly.

I need to call a JS function in headers attribute of td tag.

Code:

<td class="ScrollableCell" id="ItmUploadDate" headers="javascript:GetHeaderID('ItmUploadDate')" >UploadDate</td>

All that this function does is append a text called "ctl00_cphContent_RptrDboard_ctl00_" to the ID I pass to it.

Code:

function GetHeaderID(sElementID){
     return ("ctl00_cphContent_RptrDboard_ctl00_" + sElementID);//  
}

When I do this, I always see the html td tag as is, but is never interpreted as headers="ctl00_cphContent_RptrDboard_ctl00_ItmUploadDate"

How do I handle this?

I gave a simple usage of the function. But there is some complex logic in the function.

Thanks
Bobby

I'm a member of a forum the for the Winter season has changed it's CSS a:link color attribute to a more winter themed colour. However I want to revert back to original as I don't particularly like the new colour.

My theory is to create a small JS file, that I can define Opera (my browser) to load when loading the site, which will change the colour of links back to the original colour. I have the colour code HTML I want to change it to.

I've only ever done a small amount of JS coding but from the research I've done it should go something like this,

Code:

document.style.alinkColor = "COLOR"

I got to that via discovering that

Code:

document.style.backgroundColor = "COLOR"

will change the background colour attribute, however it doesn't seem to work. I think my problem lies somewhere in the attribute name, I know the usually with JS CSS Attributes you would make the attribute starting with a lower case letter and the sub-attribute (e.g. the color bit) starting with an upper case.

Anyone able to point me in the right direction?