Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts

    Unhappy Need help updating user submitted text...

    What am I doing wrong here? I am trying to make it where the user can name the link whatever he/she wants.... I think it might be this part... links[i] = name.linkPosition.value; Where linkPosition is a variable. Can I do this? Or is there another way?


    Code:
    <div id="navBar">
    	<ul>
        	<li><a href="#" id="link0"><script>document.write(links[0]);</script></a></li>
        	<li><a href="#" id="link1"><script>document.write(links[1]);</script></a></li>
        	<li><a href="#" id="link2"><script>document.write(links[2]);</script></a></li>
        	<li><a href="#" id="link3"><script>document.write(links[3]);</script></a></li>
        	<li><a href="#" id="link4"><script>document.write(links[4]);</script></a></li>
    	</ul>	
    
    </div><!--end navBar -->
    
    
    <form>
    <label style="color: #FFF;">Change name of links! You can only change them once!</label><br />
    <input type="text" class="customLink" size="15" name="link0"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>
    
    <input type="text" class="customLink" size="15" name="link1"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>
    
    <input type="text" class="customLink" size="15" name="link2"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>
    
    <input type="text" class="customLink" size="15" name="link3"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>
    
    <input type="text" class="customLink" size="15" name="link4"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>
    
    <input type="button" onclick="replaceLinks(this.form)" value="Replace Link Names!"  />
    </form>
    Code:
    <script>
    
    var links = new Array("home", "portfolio", "stuff", "about me", "contact");
    
    function replaceLinks(name){
    
    	for (var i=0; i<=4; i++) {
    		var linkPosition = "link"+i;
    	links[i] = name.linkPosition.value;
    		changeLink(i);
    	}
    	
    }
    
    function changeLink(number) {
    
    document.getElementById("link"+number).innerHTML="<span style=\"text-transform: capitalize;\">" + links[number] + "</span>";	
    }
    </script>
    ANY HELP WOULD BE AWESOME!!!

    I just replaced the functions to look like this...

    Code:
    function replaceLinks(name){
    
    	for (var i=0; i<=4; i++) {
    	links[i] = name.linker+i.value;
    		changeLink(i);
    	}
    	
    }
    
    function changeLink(linkNumber) {
    
    document.getElementById("link"+linkNumber).innerHTML="<span style=\"text-transform: capitalize;\">" + links[linkNumber] + "</span>";	
    }
    Now the links are updating but I get NaN for each link.
    Last edited by Mr.; 09-16-2011 at 06:29 AM.

  • #2
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts

    I found a solution...

    instead of using a loop I just did this...

    Code:
    function replaceLinks(name){
    	
    	links[0] = name.linker0.value;
    		changeLink(0);
    		
    	links[1] = name.linker1.value;
    		changeLink(1);
    
    	links[2] = name.linker2.value;
    		changeLink(2);
    
    	links[3] = name.linker3.value;
    		changeLink(3);
    		
    	links[4] = name.linker4.value;
    		changeLink(4);
    	}
    	
    
    function getLinker(){
    	name.linker0.value;
    }
    
    function changeLink(linkNumber) {
    
    document.getElementById("link"+linkNumber).innerHTML="<span style=\"text-transform: capitalize;\">" + links[linkNumber] + "</span>";	
    }
    still sucks though I couldn't figure it out...

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,932
    Thanks
    56
    Thanked 552 Times in 549 Posts
    not sure why the links were made with document write initially, or where you want them to point to, but maybe this is a start...

    Code:
    <!DOCTYPE html>
    <html>
      <head>
      <title>blank</title>
        <meta charset="UTF-8">
    </head>
    <body onload="document.forms[0].reset()">
    <div id="navBar">
    	<ul>
        	<li><div id="link0"><a href="#0">Home</a></div></li>
        	<li><div id="link1"><a href="#1">Portfolio</a></div></li>
        	<li><div id="link2"><a href="#2">Stuff</a></div></li>
        	<li><div id="link3"><a href="#3">About me</a></div></li>
        	<li><div id="link4"><a href="#4">Contact</a></div></li>
    	</ul>	
    </div><!--end navBar -->
    <form>
    <div id="label" style="color:#FFFF">Change name of links! You can only change them once! (actually, this isn't true - if you want it that way just "uncomment" the first line of the replaceLinks function)<br /> 
    <input type="text" class="customLink" size="15" name="link0"  onblur="value=removeSpaces(this.value)" maxlength="8"/>
    <input type="text" class="customLink" size="15" name="link1"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>
    <input type="text" class="customLink" size="15" name="link2"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>
    <input type="text" class="customLink" size="15" name="link3"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>
    <input type="text" class="customLink" size="15" name="link4"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>
    <input type="button" onclick="replaceLinks()" value="Replace Link Names!"  />
    </form></div>
    <script type="text/javascript">
    //var links = new Array("home", "portfolio", "stuff", "about me", "contact");
    var inps =[];
    function removeSpaces(str){
    if (str[0]==" ") {
    newstr=str.replace(" ","")
    } else {
    newstr=str.replace(/[" "]/g,"_")
    }
    return newstr;
    }
    
    function replaceLinks(){
    //document.getElementById('label').style.display="none";
    inps.length=0;
    var node_list = document.getElementsByTagName('input');
    for (var i = 0; i < node_list.length; i++) {
        var node = node_list[i];
        if (node.getAttribute('type') == 'text') {
    inps.push(node);
        }
    } 
    	for (var i=0; i<=inps.length-1; i++) {
    	name=inps[i].value;
    	if (name!=="") {
    		changeLink(i,name);
    	}
     }	
    }
    
    function changeLink(number,newname) {
    document.getElementById("link"+number).innerHTML="<span style='text-transform: capitalize;'><a href=#"+number+">" + newname + '</a></span>'
    }</script>
    </body>
    </html>
    Last edited by xelawho; 09-17-2011 at 12:27 AM. Reason: simplifying


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •