...

View Full Version : getElementById



gencoglu4
07-18-2007, 10:29 AM
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..






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

felgall
07-18-2007, 10:51 AM
document.getElementById("aaa").innerHTML+="<img src='bebis.jpg'width=50 height=70>";

Bill Posters
07-18-2007, 10:56 AM
e.g.

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">';
}

<input type="text" id="imgNum">



<div id="imgHolder"></div>

gencoglu4
07-18-2007, 02:44 PM
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 ?


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

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

}


</script>

Bill Posters
07-18-2007, 04:27 PM
Here's a very rough example…

<!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.

gencoglu4
07-18-2007, 05:07 PM
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..

Bill Posters
07-18-2007, 05:26 PM
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.

#error {
color: #f00;
}

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=0; i < valSrc.value; i++) {
imgs += '<img src="img.gif" alt="image '+(i+1)+'">';
}
container.innerHTML = imgs;
}

}

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum