www.webdeveloper.com
Results 1 to 3 of 3

Thread: Newbie Question on Buttons and document.write

  1. #1
    Join Date
    Apr 2014
    Posts
    44

    Newbie Question on Buttons and document.write

    Hello,

    It's my first time posting here, so please bear with me. I'm taking a beginners web development program and so I'm trying to figure out some of the tricks and skills of javascript. Here's my issue:

    I want to write some very simple javascript where there's a button you can click, it'll run some "while" function, and then print the HTML below the button. The way I have it right now though, I click the button and it takes me to a blank HTML document and writes and HTML there, ultimately erasing everything else on the page. Here's what my code looks like:

    PHP Code:
    <button onclick="countup();">Click</button>

        <
    script type="text/javascript">
            function 
    countup() {
                
    i=0
                
    while (i<=10) {
                    
    document.write("<p>" "</p>");
                    
    i++; }
                                }
        
    </script> 
    For my assignment for school. I have to display about half a dozen variations of this "while" statement. I wanted to be able to have all the buttons ready and the instructor can just click each one and the HTML will write out below the button clicked.

    While I'm at it, is there a way to make the HTML all write out on one line?

    Thanks to anyone that takes a look at this. I appreciate your time.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    As you found, the document.write() command will erase the content of a page, but only when called after the page has finished loading (if it is called before the page has finished loading it will only insert content).

    Now, there are a couple of different ways you could do this. If you add a new <div> element to your page and give it an id then you can simply add the text to the <div> element's innerHTML:
    Code:
    <button onclick="countup()">Click</button>
    <div id="testID"></div>
    <script>
    	function countup() {
    		var i = 0;
    		while(i <= 10) {
    			document.getElementById("testID").innerHTML += i;
    			i++;
    		}
    	}
    </script>
    That also places everything on the same line (but absolutely no spacing). The reason your code does not do this is because each number is inside of a <p> element, which is a block element by default (meaning it takes up an entire line, whether the inside content fills it or not).

    Another method would be to create the elements in the while() loop dynamically so you end up with something like:
    Code:
    <button onclick="countup()">Click</button>
    
    <script>
    	function countup() {
    		var i = 0;
    		while(i <= 10) {
    			var $e = document.createElement("span");
    			$e.innerHTML = i;
    			document.body.appendChild($e);
    			i++;
    		}
    	}
    </script>
    The above method creates a new <span> element (an inline element so it will stay on the same line) and adds the number from the while() loop, then places this new element in the <body>.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Apr 2014
    Posts
    44
    The first option made the HTML appear at the very bottom of my page. Not sure why, but I'm sure it has something to do with the other HTML I have going.

    The second option, however, was perfect! Thank you so much. This'll clean up my page very nicely.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles