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 7 of 7

Thread: getElementById

  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    37
    Thanks
    0
    Thanked 1 Time in 1 Post

    Arrow getElementById

    Hi,
    im tring to display as many pictures as the number I enter using prompt function....but it works when I use "document.write()" but it does not work if I use "document.getElementById().." as in the following script..Could you please fix it?
    I want to know if we can use a "text box" instead of that PROMPT()to enter the numbers ?
    thanks a lot..



    PHP Code:

    <script language="javascript">
    hmany=prompt("how many?",".....")
    for(
    a=1;a<=hmany;a++)
    {

    document.getElementById("aaa").innerHTML="<img src='bebis.jpg'width=50 height=70>";

    }


    </script>
    <div id="aaa">....</div> 

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    document.getElementById("aaa").innerHTML+="<img src='bebis.jpg'width=50 height=70>";
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    e.g.
    Code:
    var imgNum = document.getElementById('imgNum');
    var howMany = imgNum.value;
    var imgHolder = document.getElementById('imgHolder');
    
    for (var a = 0; a < howMany; a++) {
    	imgHolder.innerHTML += '<img src="image'+a+'.jpg" width="50" height="70">';
    }
    Code:
    <input type="text" id="imgNum">
    
    …
    
    <div id="imgHolder"></div>

  • #4
    New Coder
    Join Date
    Oct 2004
    Posts
    37
    Thanks
    0
    Thanked 1 Time in 1 Post

    Arrow

    Thanks Bill Posters
    it works fine..is it possible to display the images without needing a function/button ?.. I mean I want the image to be appear as soon as I write a number in the text box..which event should I use for the text box?

    please have a look at my following code..All I need is to use a "textbox" instead of "prompt()"
    could you modify that way ?
    PHP Code:
    <script language="javascript">
    hmany=prompt("how many?",".....")
    for(
    a=1;a<=hmany;a++)
    {

    document.write("<img src='bebis.jpg'width=50 height=70>");

    }


    </script> 

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Here's a very rough example…
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en-GB">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>test</title>
    	<style type="text/css">
    
    	#container {
    		border: 1px solid #333;
    		min-height: 20px;
    		min-width: 20px;
    	}
    
    	</style>
    	<script type="text/javascript">
    	<!--
    		function setImgs(obj) {
    
    			var maxNum = 100;
    
    			var container = document.getElementById('container');
    			var valSrc = document.getElementById('imgVal');
    			if (isNaN(valSrc.value) || valSrc.value == '' || valSrc.value == '0' || valSrc.value > maxNum) {
    				alert('Numbers only. 1-100');
    			} else {
    				var imgs = '';
    				container.innerHTML = '';
    				for (var i=0; i < valSrc.value; i++) {
    					imgs += '<img src="img.gif" alt="image '+(i+1)+'">';
    				}
    				container.innerHTML = imgs;
    			}
    
    		}
    	// -->
    	</script>
    </head>
    <body>
    <form action="/">
    <div>
    	<input type="text" id="imgVal"><button type="button" onclick="setImgs()">Accept</button>
    </div>
    </form>
    
    <div id="container"></div>
    
    </body>
    </html>
    Notes:

    It's worth setting a maximum number as attempting to add hundreds or thousands of images could potentially cause browsers to spit their dummies.
    You'll see that I used the loop to generate a string and then added that string as the innerHTML of the container.
    This is to improve performance. It's better to do it this way than to keep adding and adding to an element's innerHTML, especially when there's a chance you might be doing it many, many times in close succession.
    Last edited by Bill Posters; 07-18-2007 at 04:35 PM.

  • #6
    New Coder
    Join Date
    Oct 2004
    Posts
    37
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks..
    This one has many codes....comparing to that of mine "prompt"
    I remember once I enter a number in a textbox and the background of either textbox or of page has changed... was it "blur()" event or else ?
    Cant we trigger the function using a blur() event or other (rather than clicking on a button )

    Thanks for your patient..

  • #7
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    It may have been onmouseout or onblur, but neither of those are particularly practical, as you can't always rely on the user to trigger them.

    i.e. you can't always rely on users to click elsewhere straight away, which would trigger the onblur event. You either need to use an event which they are extremely likely to trigger* or give users a clear and specific way to 'submit' the info - i.e. clicking on a button.

    * You could possibly use onkeyup if you're willing to display the error message in a different way.

    e.g.
    PHP Code:
    #error {
        
    color#f00;

    PHP Code:
    function setImgs() {

        var 
    maxNum 100;

        var 
    container document.getElementById('container');
        var 
    valSrc document.getElementById('imgVal');
        var 
    error document.getElementById('error');

        if (
    isNaN(valSrc.value) || valSrc.value == '' || valSrc.value == '0' || valSrc.value maxNum) {
            
    valSrc.className 'error';
            
    error.innerHTML 'Numbers only. 1-100';
            
    container.innerHTML '';
        } else {
            
    valSrc.className '';
            
    error.innerHTML '';
            
    container.innerHTML '';
            var 
    imgs '';
            for (var 
    i=0valSrc.valuei++) {
                
    imgs += '<img src="img.gif" alt="image '+(i+1)+'">';
            }
            
    container.innerHTML imgs;
        }


    PHP Code:
    <input type="text" id="imgVal" onkeyup="setImgs()">
    <
    span id="error"></span
    The code is generally longer as I've put in a number of checks to 'validate' the entry and other bits to improve the overall usability.
    Last edited by Bill Posters; 07-18-2007 at 05:34 PM.


  •  

    Posting Permissions

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