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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27
  1. #1
    New Coder
    Join Date
    Oct 2013
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts

    output using .innerHTML problem???

    when i send the call for these functions its only outputting the last value in my array. anyone know why?

    Code:
    function output (params) {
    	document.getElementById("console") .innerHTML=params + "<br />";
    }
    
    function showPersons (params) {
    	for(i=0;i<params.length;i++) {
    		output(params[i]);
    		}
    }
    thanks

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Because you are overwriting the innerHTML everytime the function is called (you are using an assignment!). If you only want to add to it, use the += operator:

    Code:
    document.getElementById("console").innerHTML += params + "<br />";
    However, you could shorten this a lot if you simply did

    Code:
    function showPersons (params) {
        document.getElementById("console").innerHTML = params.join("<br />");
    }
    Side note: This is not exactly the same as what you did – my version won't append a <br /> after the last parameter. If you need it, you can manually add another + "<br />" to the end. My version will also clear the console content before adding all parameters, the fixed version of your code (when using += instead of =) won't clear it.
    Last edited by Airblader; 11-08-2013 at 10:25 PM.

  • #3
    New Coder
    Join Date
    Oct 2013
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts
    thanks for the help but after adding the +, it's now not outputting anything...not sure what the prob is any ideas?

  • #4
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Then we need more context, because from what you said and with my addition, it works. See this fiddle as an example.

    By the way, in your loop you declared i as global – this is bad practice and you should avoid it. Always use the var keyword when declaring variables.

  • #5
    New Coder
    Join Date
    Oct 2013
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Code:
    var persons =['Bryan','Ben','Blaise'];
    
    function output (params) {
    	document.getElementById("console") .innerHTML += params + "<br />";
    }
    function showPersons (params) {
    	for(i=0;i<params.length;i++) {
    		output(params[i]);
    		}
    }
    and then im calling using...
    Code:
    <input type="button" value="Get Names" onclick="showPersons(persons)"/>
    Last edited by codessential; 11-08-2013 at 10:54 PM.

  • #6
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    You aren't calling the function in that code. You need to add

    Code:
    showPersons(persons);

  • #7
    New Coder
    Join Date
    Oct 2013
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Code:
    <div id="console">
    			<form id="form">
    				<input type="button" value="Get Names" onclick="showPersons(persons)"/>
    				
    			</form>
    		</div>

    ????

  • #8
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Please show your entire code for the page so that it can actually be executed. Guessing with single snippets of code is somewhat tiring.

  • #9
    New Coder
    Join Date
    Oct 2013
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts
    sry wont make that mistake again...

    Code:
    <!DOCTYPE html>
    <html>
    <head>
     <title> getsup.com</title>
     <meta charset="utf-8" >
     
     <link rel="stylesheet" type="text/css" href="econstyle.css">
     <meta name="viewport" content="width=device+width, initial-scale=1.0">
     <script type="text/javascript" src="econ.js"></script>
    </head>
    <header>
    	<nav> <ul>
    	<li> Home </li>
    	<li> About </li>
    	<li> Contact </li>
    	</ul>
    	</nav>
    </header>
    
    <body>
    <div id="wrap">
    	<div id="game">
    		<div id="console">
    			<form id="form">
    				<input type="button" value="Get Names" onclick="showPersons(persons)"></input>
    				
    			</form>
    		</div>
    		<div id="gamelog">
    		</div>
    	</div>
    </div>
    </body>
    
    <footer>
    	<p> Copyright &copy 2013 </p>
    </footer>
    
    </html>
    lemme know if u want css page also...and you have the whole js page right now lol

    edit : heres css anyway...

    Code:
    body {
    	width: 80%;
    	height: 0 auto;
    
    }
    header {
    	background-color: grey;
    	text-align:center;
    	width: 80%;
    	height: 10%;
    	border: 2 px black solid;
    	border-radius: 10px;
    	-moz-border-radius: 10px;
    	margin : 70px 70px;
    
    }
    
    nav {
    	background-color: yellow;
    	width: 80%;
    	height: 40px;
    	border: 2px black solid;
    	border-radius: 10px;
    	-moz-border-radius: 10px;
    	padding: 1px;
    	
    
    }
    
    ul li{
    	display: inline;
    }
    
    #wrap { 
    	border: 1 px black solid;
    	margin: 10px 125px;
    	width: 100%;
    	height: 0 auto;
    	border: 0px;
    }
    
    #game{ 
    	background-color:black;
    	width: 60%;
    	height: 600px;
    	border: 2px black solid;
    	border-radius:10px;
    	-moz-border-radius:10px;
    	padding:10px;
    }
    
    #console {
    	text-align:center;
    	
    	background-color: #E0E0E0;
    	width: 65%;
    	height: 80%;
    	float:left;
    	border: 2px black solid;
    	border-radius:10px;
    	-moz-border-radius:10px;
    	padding: 10px;
    }
    
    #gamelog {
    	background-color: white;
    	width: 20%;
    	height: 80%;
    	float: left;
    	border: 2px black solid;
    	border-radius: 10px;
    	-moz-border-radius:10px;
    	padding: 10px;
    
    }
    
    #startFightForm {
    	margin: 400px 10px;
    }
    footer {
    	clear:both;
    	border: 2 px solid black;
    	border-radius: 10px;
    	-moz-border-radius: 10px;
    	text-align:center;
    }
    
    #form {
    	margin: 500px 10px;
    
    }
    Last edited by codessential; 11-08-2013 at 11:12 PM.

  • #10
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    It works "fine" for me, but the markup is simply so broken that it displays it rather oddly. You can have a look at this fiddle where I rebuilt your page. If you press the button, it displays the name, but you have to scroll all the way to the bottom.

  • #11
    New Coder
    Join Date
    Oct 2013
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts
    wow i feel dumb... i actually never noticed the content being produced way at the bottom...

  • #12
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    I only noticed after a few attempts, too, so no reason to feel dumb.

  • #13
    New Coder
    Join Date
    Oct 2013
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts
    and...could you enlighten me as to why this markup is so broken besides the obvious output problem. what about the way i have everything set up makes it broken if you dont mind explaining...

  • #14
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    It's your CSS for #form. If you remove it, it will look way different. I guess you used that margin to position the button underneath the "console", but syntactically it is INSIDE the console.
    Now, when you add to the innerHTML of the console, it is appended after the button, which will be way outside the console window.

    If you want to output into console, but have the button be outside that div, place the button outside of it, not "fake" it by moving it with CSS.

    Here's a quick example where I moved it out of the div: http://jsfiddle.net/srrPf/1/

  • Users who have thanked Airblader for this post:

    codessential (11-09-2013)

  • #15
    New Coder
    Join Date
    Oct 2013
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts
    i see....

    well after understanding that i tried to make a function to clear the .innerHTML everytime the request is made... heres what i got...

    Code:
    var persons = ['Bryan', 'Ben', 'Blaise'];
    var realConsole = document.getElementById("Console").innerHTML;
    
    function clearOutput(params) {
    	realConsole = "";
    }
    
    function output(params) {
    	if (realConsole != "")
    		{
    			clearOutput(params);
    		}
    	
    	if (realConsole === "")
    		{
    			document.getElementById("console").innerHTML += params + "<br />";
    		}
    	
    }
    
    function showPersons(params) {
        for (var i = 0; i < params.length; i++) {
            output(params[i]);
        }
    }
    been sittin here for a bit trying to figure it out. made it do a few diff things but no cigar...
    Last edited by codessential; 11-09-2013 at 01:24 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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