Forum Moderators: open
<HTML>
<HEAD>
<TITLE>Welcome to My Exhibitions</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function addRow(){
var argv = addRow.arguments;
cal argc = argv.length;
for (var i = 0; i < argc; i++) {
var displayButton = document.getElementById(displayButton);
var row = document.createElement("tr")
var c_TD1 = document.createElement("td")
c_TD1.appendChild(document.createTextNode (argv[1])
row.appendChild(c_TD1);
if (c_TD1 > 1) {
displayButton.appendChild(row);
}
displayButton.appendChild(row);
}
}
// End -->
</script>
</HEAD>
<BODY>
<p>After Clicking on the following link. I want the visitor to have
access to varying buttons, based on their selection of of venue. The
problem I am having is that the number of these buttons will not be
static from venue menu to venue menu. The following button is an
example of one of these venue selections.
<br><br><a onclick="addRow('pic1', 'pic2', 'pic3',
'pic4');">venue1Link</a>
<TABLE WIDTH=375 id="displayButton">
</TABLE>
<p>Here is the problem. It doesn't work. But if it did it would
render a table that looks like this.
<TABLE WIDTH=375>
<TR>
<td>pic1</td><td>pic2</td></tr>
<td>pic3</td><td>pic4</td></tr>
</TR>
</TABLE>
<p>I want to pass the the name of each button through the addRow()
parameters.
</BODY>
</HTML>
The algorithm was a little messed up too.
(not a big deal) The arguments array as a property of the function is deprecated in Javascript. It is now referenced globally.
The rows must be added, not to the TABLE, but to the TBODY element, which is there even if it's not in the source code. (This always gets me too).
It is apparently quicker to build a table 'outwards', rather than building each row then adding it.
--HTML--------------------------
<a href="#" onclick="addRow('pic1', 'pic2', 'pic3','pic4');return false;">
--JS----------------------------
function addRow()
{
var body = document.getElementById('displayButton')
.getElementsByTagName('tbody')[0];
var row = body.appendChild( document.createElement('tr') );for ( i=0, cell; i < arguments.length; i++)
{
cell = row.appendChild( document.createElement('td') );
cell.appendChild( document.createTextNode( arguments[i]) );
}
}
var cell = row.appendChild(document.createElement('td') );
but who cares...
By the way why do you use the "return false" at the end of the event handler?
Gratefully,
Mitchell
What I want here is to create styles, and set attributes to the new classes. What's wrong with this?
function addRow() {
var body = document.getElementById('displayButton')
.getElementsByTagName('tbody')[0];
var row = body.appendChild(document.createElement('tr') );
for ( i=0, cell; i < arguments.length; i++) {
var nameMe = document.createElement("td");
nameMe.setAttribute("name","gallery_Item[" + i + "]");
nameMe.onClick(picture.src=display[" + i + ];
changeDescript(myPic_name[" + i + "], myPic_descript[" + i + "]));
var cell = row.appendChild(nameMe);
cell.appendChild(document.createTextNode( arguments[i]) );
}
}
the variable cell needed to be declared globally.var cell = row.appendChild(document.createElement('td') );
Youre half-right there. It should hav been declared (not globally though). In fact I attempted to
but forgot the 'var'. At the top of the loop:
for ( [b][blue]var[/blue][/b] i=0, cell; i < arguments.length; i++)
Inside the new function, you've made a little mistake in the loop.
A missing quote:
nameMe.onClick(picture.src=display[" + i + [b][blue]"[/blue][/b]];There's no need to swap variables half-way through.
So.
Are you sure you want to set a "name" attribute for a TD element?
for (var i=0, cell; i < arguments.length; i++)
{
cell = document.createElement("td");
/* name attribute for a TD? */
cell.setAttribute("name","gallery_Item[" + i + "]");
cell.onClick(picture.src=display[" + i + "];
changeDescript(myPic_name[" + i + "], myPic_descript[" + i + "]));
row.appendChild(cell);
cell.appendChild(document.createTextNode( arguments[i]) );
}
By the way why do you use the "return false" at the end of the event handler?
The link has href="#" ("top of page"). return false stops the action being entered in the history, and the page jumping if it is scrolled down.
function addRow() {
var body = document.getElementById('displayButton') .getElementsByTagName('tbody')[0];
var row = body.appendChild( document.createElement('tr'));
for (var i=0, cell; i < arguments.length; i++) {
cell = document.createElement("td");
/* name attribute for a TD? */
cell.setAttribute("name","gallery_Item[" + i + "]");
/*there is a missing ')' somewhere here. I can't figure it out. error says that it is expected.*/
/*Actually, I can get passed this error by changing the ';' to '&&'*/
cell.onClick(picture.src=display[" + i + "] &&
changeDescript(myPic_name[" + i + "], myPic_descript[" + i + "]));
row.appendChild(cell);
cell.appendChild(document.createTextNode( arguments[i]) ); }
}
but now it wont work.
cell.onClick(picture.src=display[" + i + "] &&
changeDescript(myPic_name[" + i + "], myPic_descript[" + i + "]) );
I think you are trying to assign an onclick handler, but are calling an imaginary onClick method
with all that as arguments. Read
this thread [webmasterworld.com] it may help.
The statement is also syntactically messed up - look at the quotes. So it will cause an error from the getgo.
I'm not sure I can say more until I know more.
First of all I dont need to name the table cells anymore now that the arrguments can define the text.
The user will have the option to change up the gallery venue with out loading a new page. Instead the buttons to the gallery images actually change, both thier text and the image they call. This is why I need to use arrays for just about every argument they pass. Basically, when the user decides to change the gallery venue, then buttons will be loaded into the <tbody>. We started out actually giving the user the option to create the following tbody.
<tr><td>pic1</td><td>pic2</td></tr>
but what I want is this. What I need to know is how to write the following javascript properly
cell.onClick = "picture.src='display[" + i + "]'; changeDescript(myPic_name[" + i + "], myPic_descript[" + i + "])";
where it would render a tbody comparible to:
<tr><td name="gallery_Item[0]" onclick="picture.src=display[0]; changeDescript(myPic[0], myPic_descript[0])">pic1</td>
<td name="gallery_Item[1]" onclick="picture.src=display[0]; changeDescript(myPic[1], myPic_descript[0])">pic1</td>
with the user having the option to reload the tbody and render something that looks exactly like the above (depending on how many arguments there are - images)
but instead the actual arrays change.
FYI:
where
display[0] = beforeLunch_pic.src;
myPic_name[0] = beforeBrunch;
myPic_descript[0] = beforeBrunch_describe;
now the arrays change once the user has opted to change the gallery venue.
display[0] = shadow_pic.src;
myPic_name[0] = afistFull;
myPic_descript[0] = afistFull_describe;
What I need to know is how to write the following javascript properly where it would render a tbody comparible to:
