/    Sign up×
Community /Pin to ProfileBookmark

Small problem with a script I’m trying to make.

I wanted to create a small DHTML code that created a unordered list of input forms dependent on the number selected from the select dropdown menu. Problem is that it doesn’t seem to want to generate the list. I think the variables are within the scope of the function too, and I didn’t get an errors from the javascript console when using firebug. The script itself runs, I tested it when I used the old standby alert(); to see if the script was active. Here’s the code:

[CODE]function createTracklisting(){
var a = 0;
var b;
var li = document.createElement(‘li’);
var atag = document.createElement(‘a’);
var input = document.createElement(‘input’);
var list;
var box_entry;
a = document.getElementById(‘track_number’).value;
while(a.toPrecision >= 0){
list = document.getElementById(‘track_listing’).appendChild(li);
list.setAttribute(“Id”, “Track ” + a.toString);
box_entry = list.appendChild(input);
box_entry.setAttribute(“type”, “text”);
box_entry.setAttribute(“name”, “track ” + a.toString);
a–;
}[/CODE]

to post a comment
JavaScript

26 Comments(s)

Copy linkTweet thisAlerts:
@JMRKEROct 22.2011 — Try re-arranging your code a bit...?
<i>
</i>&lt;!DOC HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Untitled &lt;/title&gt;
&lt;script type="text/javascript"&gt;
function createTracklisting() {
var a = 0;
var b, li, atag, input, list, box_entry;
a = Number(document.getElementById('track_number').value);
while(a &gt;= 1){
li = document.createElement('li');
atag = document.createElement('a');
input = document.createElement('input');
list = document.getElementById('track_listing').appendChild(li);
list.setAttribute("id", "Track" + a.toString());
box_entry = list.appendChild(input);
box_entry.setAttribute("type", "text");
box_entry.setAttribute("name", "Track" + a.toString());
a--;
}
}
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;input type="text" id="track_number" value="5"&gt;
&lt;button onclick="createTracklisting()"&gt;Create Tracks&lt;/button&gt;&lt;p&gt;
&lt;div id="track_listing"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Closer to what you want??? ?
Copy linkTweet thisAlerts:
@Lawrence_FieldsauthorOct 25.2011 — That's not quite what I wanted, see even though you rearranged the code it still doesn't function on the web page. Plus I don't want it to be a onclick() but rather onchange() for input fields. Let me show you an example:

[CODE] <p class="header">Track Listing:</p>
<p>How many tracks?</p>
<form action="edit_page.php" method="POST">
<select name="tracks" id="track_number" onChange="createTracklisting()">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<input type="button" value="submit" name="F_submit">
<ul id="track_listing">
</ul>
</form>[/CODE]



That's what I want the code to edit. I want it to charge when the user selects an option, not by pressing a button. The button I'm saving for the PHP script.
Copy linkTweet thisAlerts:
@JMRKEROct 25.2011 — If that's what you want, why not just merge the parts together?
<i>
</i>&lt;!DOC HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Untitled &lt;/title&gt;
&lt;script type="text/javascript"&gt;
function createTracklisting() {
var a = 0;
var b, li, atag, input, list, box_entry;
a = Number(document.getElementById('track_number').value);
while(a &gt;= 1){
li = document.createElement('li');
atag = document.createElement('a');
input = document.createElement('input');
list = document.getElementById('track_listing').appendChild(li);
list.setAttribute("id", "Track" + a.toString());
box_entry = list.appendChild(input);
box_entry.setAttribute("type", "text");
box_entry.setAttribute("name", "Track" + a.toString());
a--;
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p class="header"&gt;Track Listing:&lt;/p&gt;
&lt;p&gt;How many tracks?&lt;/p&gt;
&lt;form action="edit_page.php" method="POST" onsubmit="return false"&gt;
&lt;select name="tracks" id="track_number" onChange="createTracklisting()"&gt;
&lt;option value="1" selected="selected"&gt;1&lt;/option&gt;
&lt;option value="2"&gt;2&lt;/option&gt;
&lt;option value="3"&gt;3&lt;/option&gt;
&lt;option value="4"&gt;4&lt;/option&gt;
&lt;option value="5"&gt;5&lt;/option&gt;
&lt;option value="6"&gt;6&lt;/option&gt;
&lt;option value="7"&gt;7&lt;/option&gt;
&lt;option value="8"&gt;8&lt;/option&gt;
&lt;option value="9"&gt;9&lt;/option&gt;
&lt;option value="10"&gt;10&lt;/option&gt;
&lt;/select&gt;
&lt;input type="button" value="submit" name="F_submit"&gt;
&lt;ul id="track_listing"&gt;
&lt;/ul&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

One thing you will need to change...

1. Alter the actions of the <form> tag "onsubmit=" function,

probably to "return true" if you have no other validation checks.

Another consideration: Will the user ever select a number of tracks

and then change his/her mind and select some other number?

If so, you will need to remove the earlier creations when the new amount is created.
Copy linkTweet thisAlerts:
@Logic_AliOct 25.2011 — This line makes no sense and evaluates false while(a.toPrecision >= 0){[/quote]
Copy linkTweet thisAlerts:
@Lawrence_FieldsauthorOct 25.2011 — If that's what you want, why not just merge the parts together?
<i>
</i>&lt;!DOC HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Untitled &lt;/title&gt;
&lt;script type="text/javascript"&gt;
function createTracklisting() {
var a = 0;
var b, li, atag, input, list, box_entry;
a = Number(document.getElementById('track_number').value);
while(a &gt;= 1){
li = document.createElement('li');
atag = document.createElement('a');
input = document.createElement('input');
list = document.getElementById('track_listing').appendChild(li);
list.setAttribute("id", "Track" + a.toString());
box_entry = list.appendChild(input);
box_entry.setAttribute("type", "text");
box_entry.setAttribute("name", "Track" + a.toString());
a--;
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p class="header"&gt;Track Listing:&lt;/p&gt;
&lt;p&gt;How many tracks?&lt;/p&gt;
&lt;form action="edit_page.php" method="POST" onsubmit="return false"&gt;
&lt;select name="tracks" id="track_number" onChange="createTracklisting()"&gt;
&lt;option value="1" selected="selected"&gt;1&lt;/option&gt;
&lt;option value="2"&gt;2&lt;/option&gt;
&lt;option value="3"&gt;3&lt;/option&gt;
&lt;option value="4"&gt;4&lt;/option&gt;
&lt;option value="5"&gt;5&lt;/option&gt;
&lt;option value="6"&gt;6&lt;/option&gt;
&lt;option value="7"&gt;7&lt;/option&gt;
&lt;option value="8"&gt;8&lt;/option&gt;
&lt;option value="9"&gt;9&lt;/option&gt;
&lt;option value="10"&gt;10&lt;/option&gt;
&lt;/select&gt;
&lt;input type="button" value="submit" name="F_submit"&gt;
&lt;ul id="track_listing"&gt;
&lt;/ul&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

One thing you will need to change...

1. Alter the actions of the <form> tag "onsubmit=" function,

probably to "return true" if you have no other validation checks.

Another consideration: Will the user ever select a number of tracks

and then change his/her mind and select some other number?

If so, you will need to remove the earlier creations when the new amount is created.[/QUOTE]


About 2. I figured I might have to do that, but I just want the script to do what it's supposed to do first, then worry about that. So you're saying just use the code in the same page as appose to just linked from an external js file to the .php file right? Does it really make a difference though?
Copy linkTweet thisAlerts:
@Lawrence_FieldsauthorOct 25.2011 — This line makes no sense and evaluates false[/QUOTE]

I though the numbers from the options were string values, that's why I had .toPrecision there. I'll just remove that.
Copy linkTweet thisAlerts:
@Logic_AliOct 25.2011 — I though the numbers from the options were string values, that's why I had .toPrecision there. I'll just remove that.[/quote]They are strings, but toPrecision is a function but you're not calling it.

Presumably you want to ensure that the number entered is an integer.

Use isNaN() to ensure that its convertable to a number then Math.floor() or parseInt() to get the integer component.
Copy linkTweet thisAlerts:
@JMRKEROct 25.2011 — About 2. I figured I might have to do that, but I just want the script to do what it's supposed to do first, then worry about that. So you're saying just use the code in the same page as appose to just linked from an external js file to the .php file right? Does it really make a difference though?[/QUOTE]
?

I don't understand your second statement.

What external JS file?

You have only ever posted a snippet of the code,

so I have no idea what "same" or different page you are talking about.
Copy linkTweet thisAlerts:
@Lawrence_FieldsauthorOct 25.2011 — :confused:
I don't understand your second statement.

What external JS file?

You have only ever posted a snippet of the code,

so I have no idea what "same" or different page you are talking about.[/QUOTE]

I have the .js file linked to the .php page:

[CODE]<script type="text/javascript" src="p_loader.js"></script>[/CODE]

Like so.

This is how the entire page looks:

[CODE]<!DOCTYPE html>

<html>
<head>
<script type="text/javascript" src="p_loader.js"></script>
<link rel="stylesheet" href="color_scheme_2.css" type="text/css">
<title>Righteous Inc's Admin Page</title>
</head>



<body>

<div id="wrapper">

<div id="login">
<form action="edit_page.php" method="POST">
<p class="header">Username:</p><input type="text" size="60" value="username"/>
<p class="header">Password:</p><input type="password" size="60" value="password"/>
<input type="button" value="submit" name="L_submit">
</form>
</div>

<div id="featured">
<p class="header">Mixtape Picture:</p><input type="file">
<p class="header">Description:</p>
<textarea>

</textarea>
<p class="header">Track Listing:</p>
<p>How many tracks?</p>
<form action="edit_page.php" method="POST" onsubmit="return true">
<select name="tracks" id="track_number" onchange="createTracklisting()">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<input type="button" value="submit" name="F_submit">
<ul id="track_listing">
</ul>
</form>
</div>

<div id="artists">
<form action="edit_page.php" method="POST">
<select name="new_or_edit" id="artists">
<option selected="selected">Edit</option>
<option>New</option>
</select>
<input type="file">
<input type="text" name="artists_name" value="name">
<textarea>
</textarea>
<p>How many tracks?</p>
<select name="a_tracks" id="a_track_number" onchange="">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option>9</option>
<option>10</option>
</select>
<input type="button" value="submit" name="a_submit">

<ul id="a_track_listing">
</ul>
</form>
</div>

<div id="shows">
<form action="edit_page.php" method="POST">
<select name="new_or_edit" id="shows">
<option selected="selected">Edit</option>
<option>New</option>
</select>
<p class="header">City:</p><input type="text" size="90" value="city">
<p class="header">Venue:</p><input type="text" size="90" value="location">
<p class="header">Time</p><input type="text" size="90" value="time">
<p class="header">Description:</p>
<textarea>
</textarea>
<input type="button" value="submit" name="s_submit">
</form>
</div>

</div>


</body>
</html>
[/CODE]
Copy linkTweet thisAlerts:
@Lawrence_FieldsauthorOct 25.2011 — A little update, I got it to add objects to the DOM now (a syntax error was stopping my script from running, lmao), however it's not counting down correctly. Instead of going by the number of selected it's using the default number (which is 1) and adding by that regardless of what I choose.


@Logic Ali :

I did what you said about using isNaN() and parseInt(), so it must be something else.
Copy linkTweet thisAlerts:
@JMRKEROct 25.2011 — A little update, I got it to add objects to the DOM now (a syntax error was stopping my script from running, lmao), however it's not counting down correctly. Instead of going by the number of selected it's using the default number (which is 1) and adding by that regardless of what I choose.


@Logic Ali :

I did what you said about using isNaN() and parseInt(), so it must be something else.[/QUOTE]


Clarification needed:

Are you trying to create one (1) new tract description with the id modified to match the drop-down option # selected? (Note this may not be a good idea unless you modify the id to be unique whenever you create the new element). This might be the problem to which you are referring, but will need to see the actual JS function being used (see below).

Or are you trying to create X number of new tract descriptions depending upon the number selected in the drop-down select box?


Also, what you posted was the HTML only. The JS may be in the external file, which is fine, but we can not comment on that which we cannot see!
Copy linkTweet thisAlerts:
@Lawrence_FieldsauthorOct 25.2011 — Clarification needed:

Are you trying to create one (1) new tract description with the id modified to match the drop-down option # selected? (Note this may not be a good idea unless you modify the id to be unique whenever you create the new element). This might be the problem to which you are referring, but will need to see the actual JS function being used (see below).

[B]Or are you trying to create X number of new tract descriptions depending upon the number selected in the drop-down select box?

[/B]


Also, what you posted was the HTML only. The JS may be in the external file, which is fine, but we can not comment on that which we cannot see![/QUOTE]


I'm trying to do the second thing you mentioned, problem is that it will not pick up on said number and only adds one at a time. Maybe if I created an array, set it to said number, and then have it created elements within that array I could get it to function properly. Also reason why I didn't post the whole js file is because this is the only section of the code that affects the admin page thus far because the entire site is still be developed. The rest of the scripting affects the index page, which is working fine.

But if you insist on seeing the full .js file...

[CODE]//Dynamic HTML script for switching content on the fly. No fancy AJAX needed.


alert("testing");


//Changes html for the index
function clickHome(){
document.getElementById('home').style.display = 'block';
document.getElementById('about').style.display = 'none';
document.getElementById('artists').style.display = 'none';
document.getElementById('shows').style.display = 'none';
document.getElementById('mixtapes').style.display = 'none';
document.getElementById('feedback').style.display = 'none';

}
function clickAbout(){
document.getElementById('home').style.display = 'none';
document.getElementById('about').style.display = 'block';
document.getElementById('artists').style.display = 'none';
document.getElementById('shows').style.display = 'none';
document.getElementById('mixtapes').style.display = 'none';
document.getElementById('feedback').style.display = 'none';

}
function clickArtists(){
document.getElementById('home').style.display = 'none';
document.getElementById('about').style.display = 'none';
document.getElementById('artists').style.display = 'block';
document.getElementById('shows').style.display = 'none';
document.getElementById('mixtapes').style.display = 'none';
document.getElementById('feedback').style.display = 'none';
}

function clickShows(){
document.getElementById('home').style.display = 'none';
document.getElementById('about').style.display = 'none';
document.getElementById('artists').style.display = 'none';
document.getElementById('shows').style.display = 'block';
document.getElementById('mixtapes').style.display = 'none';
document.getElementById('feedback').style.display = 'none';
}

function clickMixtapes(){
document.getElementById('home').style.display = 'none';
document.getElementById('about').style.display = 'none';
document.getElementById('artists').style.display = 'none';
document.getElementById('shows').style.display = 'none';
document.getElementById('mixtapes').style.display = 'block';
document.getElementById('feedback').style.display = 'none';
}


function clickFeedback(){
document.getElementById('home').style.display = 'none';
document.getElementById('about').style.display = 'none';
document.getElementById('artists').style.display = 'none';
document.getElementById('shows').style.display = 'none';
document.getElementById('mixtapes').style.display = 'none';
document.getElementById('feedback').style.display = 'block';
}

//Changes HTML for the admin page

function createTracklisting() {
var a = 0;
var b;
var li = document.createElement('li');
var atag = document.createElement('a');
var input = document.createElement('input');
var list;
var box_entry;
a = document.getElementById('track_number').value;
if(isNaN(a) == true){
parseInt(a);
}
while(a >= 0){
list = document.getElementById('track_listing').appendChild(li);
list.setAttribute("Id", "Track " + a.toString);
box_entry = list.appendChild(input);
box_entry.setAttribute("type", "text");
box_entry.setAttribute("name", "track " + a.toString);
a--;
}
}
/* Some BS I might not need.

box_entry = document.getElemenyById('tracks').appendChild(input);
box_entry.setAttribute("type", "button");
box_entry.setAttribute("name", "tl_submit");
box_entry.setAttribute("value", "submit");
*/

[/CODE]
Copy linkTweet thisAlerts:
@JMRKEROct 25.2011 — So many questions, so little time... :rolleyes:

  • 1. Why do you have 4 different <form> tags? None have a name="" assignment.


    When the submit is pressed, how does it know to which form to submit?


    I assume to the enclosed <form> tag action assignment, but I could not guarantee that.


    Does it truly work that way or is that what you are trying to do and it does not work correctly?


  • 2. Why have so much duplicated code about clicking some tab in your external file.

    I would suggest compressing to something like this:
    <i>
    </i>var baseTabs = ['home','about','artists','shows','mixtapes','feedback'];

    function clickTabs(IDS){
    for (var i=0; i&lt;baseTabs.length; i++) {
    document.getElementById('about').style.display = 'none';
    }
    document.getElementById(IDS).style.display = 'block';
    }

    Called by what ever button like onclick="clickTabs('home')" or onclick="clickTabs('about')" etc.

    But you have neglected to show where this code is being used in the "full" code you provided (?)

    ?

  • 3. Why include the login/password code when you have no test for validity of the entries?


  • 4. How is the "track_listing" supposed to be related to the "tract_numbers"?


  • 5. Do you have a live site where you are testing the code on-line? What kind of errors are you getting in the error console? Are you using FF or MSIE browsers?


  • As you might be able to tell by now, I'm really confused as to what you are trying to accomplish here.

    You started out with a simple question in your first post, to which I gave a solution.

    You stated that you modified it, but that it did not work.


    What did not work, my code or your modification?

    I changed the code to match your needs in post #4. What was wrong with that solution?

    Now you have added a lot of code that appears unrelated to the original question.

    I would suggest that you start again and solve one problem at a time.

    What was wrong with the solution of post #2 (or #4) and/or why the need to modify it?

    Once one problem is solved, then move on to the next until all are resolved. ?

    Add one section of code at a time and make sure it works before proceeding to next section. ?
    Copy linkTweet thisAlerts:
    @Lawrence_FieldsauthorOct 25.2011 — 
  • 1. As I stated before, the page is under construction, reason why those forms don't have a method nor a name assigned to them yet is because I haven't got around to acutally scripting code to validate those forms first. I'm working on this portion first, then going to the next.


  • 2. I really don't think about using arrays for it since the code I had was working for the index page. Hence why you don't see the code for the index, because I don't have questions about it. It's also the reason I didn't initally post the entire .js file, because I knew it would seem confusing. Not to mention the only portion I had a question about was the code in the original post. However now that I see you can use an array for that I'll consider compressing it.


  • EDIT: Actually, I may not want to do that. Using your method I would have to first search through the array for the clicked tab first, then search through the tab to check hide the rest. That's numerous cycles that may cause the script to run slower then just using a slightly different duplicate for each tab.

  • 3. That's because I didn't write the validation code yet, lol. I'll get to that in a minute, I'm more concerned about this portion of the script.


  • 4.track_numbers determine how many input fields are generated for track_listing. Once those fields are completed then it is passed on to the index page.

    5.Yeah, I have a live site. I also have a WYSIWHAT editor and I'm testing the page in IE, FF, Chrome and Opera. I'm using firebug in FF and it's equalivent in Chrome to catch any errors.

    There wasn't anything wrong with what you posted ealier, problem is that it wasn't generating anything. Turns out that I had an extra } hanging around like the 2000 Florida elections and that prevented the code from running. I deleted the } and reverted by to my old code and saw that it was generating the fields...incorrectly though. Now I just need it to add the correct fields. I worry about removing fields if the user picks a new number later.
    Copy linkTweet thisAlerts:
    @JMRKEROct 25.2011 — ...

  • 2. I really don't think about using arrays for it since the code I had was working for the index page. Hence why you don't see the code for the index, because I don't have questions about it. It's also the reason I didn't initally post the entire .js file, because I knew it would seem confusing. Not to mention the only portion I had a question about was the code in the original post. However now that I see you can use an array for that I'll consider compressing it.


  • EDIT: Actually, I may not want to do that. Using your method I would have to first search through the array for the clicked tab first, then search through the tab to check hide the rest. That's numerous cycles that may cause the script to run slower then just using a slightly different duplicate for each tab.

    ...
    [/QUOTE]


    No, take a look at that part of the suggestion again.

    All the look-up and hiding and showing is done for you in those 7 lines of code.

    Try it, you might like it. If you need some demo code, I can provide that.

    But then again, it's your code so do as you wish.
    Copy linkTweet thisAlerts:
    @Lawrence_FieldsauthorOct 25.2011 — No, take a look at that part of the suggestion again.

    All the look-up and hiding and showing is done for you in those 7 lines of code.

    Try it, you might like it. If you need some demo code, I can provide that.

    But then again, it's your code so do as you wish.[/QUOTE]


    I'll try it when I get home, right now I'm at my day job.
    Copy linkTweet thisAlerts:
    @Lawrence_FieldsauthorOct 26.2011 — So I tried your array thing, it doesn't work. I assume that IDS is a variable and you just enter the tab id into it like so:

    [CODE] <a href="#" onclick="clickTabs(artists)">[/CODE]

    Anyway, I put the code into my .js and it breaks the page. None of the tabs changed over like it did with my original code. I'll link to you both pages:

    Using your js array to switch content:

    http://lambdaweb.awardspace.com/Donavan/test2.html


    Using the old code to switch content:

    http://lambdaweb.awardspace.com/Donavan/index.html

    Unless I did something incorrectly while implementing it.

    But this is a moot point, I just want to figure out why my code isn't counting up correctly for the track_listing thing. I'll have to mess around with it later, have to prepare for a job interview tomorrow.
    Copy linkTweet thisAlerts:
    @JMRKEROct 26.2011 — No, it should be:
    <i>
    </i>&lt;ul id="nav"&gt;
    &lt;li&gt; &lt;a href="#" onclick="clickTabs('home')"&gt; Home &lt;/a&gt; &lt;/li&gt;
    &lt;li&gt; &lt;a href="#" onclick="clickTabs('about')"&gt; Contact Us &lt;/a&gt; &lt;/li&gt;
    &lt;li&gt; &lt;a href="#" onclick="clickTabs('artists')"&gt; Assoc.Artists &lt;/a&gt; &lt;/li&gt;
    &lt;li&gt; &lt;a href="#" onclick="clickTabs('shows')"&gt; Shows &lt;/a&gt; &lt;/li&gt;
    &lt;li&gt; &lt;a href="#" onclick="clickTabs('mixtapes')"&gt; Mixtapes &lt;/a&gt; &lt;/li&gt;
    &lt;li&gt; &lt;a href="#" onclick="clickTabs('feedback')"&gt; Feedback &lt;/a&gt; &lt;/li&gt;
    &lt;/ul&gt;


    And in your external file it should be:
    <i>
    </i>var baseTabs = ['home','about','artists','shows','mixtapes','feedback'];

    function clickTabs(IDS){
    for (var i=0; i&lt;baseTabs.length; i++) {
    document.getElementById(baseTabs[i]).style.display = 'none';
    }
    document.getElementById(IDS).style.display = 'block';
    }
    Copy linkTweet thisAlerts:
    @Lawrence_FieldsauthorOct 26.2011 — Ah, now I see what you were talking about. It works now, that's pretty neat. I'll just trash the old code then. In any event, I still to figure out why the my script isn't generating the right number of inputs fields with the original problem I was inquirying about.
    Copy linkTweet thisAlerts:
    @JMRKEROct 26.2011 — Ah, now I see what you were talking about. It works now, that's pretty neat. I'll just trash the old code then. In any event, I still to figure out why the my script isn't generating the right number of inputs fields with the original problem I was inquirying about.[/QUOTE]

    Please re-state the underlying problem as I thought we had solved that back in post #4. :eek: ?
    Copy linkTweet thisAlerts:
    @Lawrence_FieldsauthorOct 26.2011 — Please re-state the underlying problem as I thought we had solved that back in post #4. :eek: ?[/QUOTE]

    You misunderstood what I was talking about in post 4, which lead to me posting source code for the admin page and the .js file. Doing that lead to our discussion about the redundant code I had to switch tabs. The original problem I had that the li objects would not populate when an option was chosen. Turns out I had a loose "}" in my .js file. After taking care of that I noticed that it did generate a li object, however it only created one at a time regardless of the number choosen. This is the problem I am having. Here's the page to show you the issue at hand.

    http://lambdaweb.awardspace.com/Donavan/admin.php
    Copy linkTweet thisAlerts:
    @JMRKEROct 26.2011 — You misunderstood what I was talking about in post 4, which lead to me posting source code for the admin page and the .js file. Doing that lead to our discussion about the redundant code I had to switch tabs. The original problem I had that the li objects would not populate when an option was chosen. Turns out I had a loose "}" in my .js file. After taking care of that I noticed that it did generate a li object, however it only created one at a time regardless of the number choosen. This is the problem I am having. Here's the page to show you the issue at hand.

    http://lambdaweb.awardspace.com/Donavan/admin.php[/QUOTE]


    The link you provided uses your OLD code in the external file.

    It does not use the version I changed (that works) in posts #2 and #4.

    It does not contain the suggested change I last posted for your tabs either.

    If you want to use your original code, go ahead, but you will continue to have problems, AFAIK.
    Copy linkTweet thisAlerts:
    @Lawrence_FieldsauthorOct 26.2011 — The link you provided uses your OLD code in the external file.

    It does not use the version I changed (that works) in posts #2 and #4.

    It does not contain the suggested change I last posted for your tabs either.

    If you want to use your original code, go ahead, but you will continue to have problems, AFAIK.[/QUOTE]


    I had edited it in online while at work and it didn't seem to work so I reverted back to the old code. However I just tried your code offline and it seems to work now. Thanks.
    Copy linkTweet thisAlerts:
    @Lawrence_FieldsauthorOct 28.2011 — I hate to bother you again but I was trying to make a routine to remove excess li nodes created by the script and it turns out it either removes all of the generated ones OR removes (n -1) fields.

    The bold portion is the routine I was using:

    [CODE]function createTracklisting() {
    var a = 0;
    var b = 0;
    var li, atag, input, list, box_entry;
    a = Number(document.getElementById('track_number').value);
    a = document.getElementById('track_number').value;
    if(isNaN(a) == true){
    parseInt(a);
    }



    while(a >= 1){



    li = document.createElement('li');
    atag = document.createElement('a');
    input = document.createElement('input');
    list = document.getElementById('track_listing').appendChild(li);
    list.setAttribute("id", "Track" + a.toString());
    box_entry = list.appendChild(input);
    box_entry.setAttribute("type", "text");
    box_entry.setAttribute("name", "Track " + a.toString());

    a--;

    }

    a = Number(document.getElementById('track_number').value);

    [B]function checkLength(){
    if(document.getElementById('track_listing').childNodes.length > a){
    document.getElementById('track_listing').removeChild(li);
    checkLength();
    }
    }[/B]

    checkLength();
    }[/CODE]
    Copy linkTweet thisAlerts:
    @Lawrence_FieldsauthorOct 29.2011 — Nevermind, I figured it out. I just had it loop through the dom array using firstChild and nextSibling while checking if length was greater than a.

    [CODE] function checkLength(){
    if(document.getElementById('track_listing').childNodes.length > a){
    document.getElementById('track_listing').removeChild(document.getElementById('track_listing').firstChild);
    document.getElementById('track_listing').nextSibling;
    checkLength();
    }
    }[/CODE]
    Copy linkTweet thisAlerts:
    @JMRKEROct 29.2011 — Working on the specific problem a bit more, I've come up with a more generic solution;
    <i>
    </i>
    &lt;html&gt;
    &lt;body&gt;
    &lt;script type="text/javascript"&gt;

    var elemCount = 0;
    function pushElem(IDS) {
    elemCount++;
    var m = "New Element "+elemCount;
    var n = document.createElement("li");
    n.appendChild(document.createTextNode(m));
    document.getElementById(IDS).appendChild(n);
    }

    function popElem(IDS) {
    if (elemCount &gt; 0) {
    elemCount--;
    document.getElementById(IDS).removeChild(document.getElementById(IDS).lastChild);
    }
    }

    function dropElems(IDS) {
    var l = document.getElementById(IDS).getElementsByTagName('li').length;
    while (l &gt; 0) { popElem(IDS); l--; }
    }

    window.onload = function() {
    for (var i=0; i&lt;5; i++) { pushElem('myList'); } // simulated drop-down creation
    }

    &lt;/script&gt;
    &lt;input type="button" value="Add list item" onClick="pushElem('myList');"&gt;
    &lt;input type="button" value="Remove added item" onClick="popElem('myList');"&gt;
    &lt;input type="button" value="Remove all items" onClick="dropElems('myList');"&gt;
    &lt;ul id="myList"&gt;&lt;/ul&gt;
    &lt;/body&gt;
    &lt;/html&gt;

    Extract parts you need if you still have any interest.

    Otherwise mark thread as "resolved"

    Good Luck! ?
    ×

    Success!

    Help @Lawrence_Fields spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...