Menu
I’m trying to use an ajax function to load filenames into a text area. This works and is not the problem.
Then I read the contents of the text file and create an array of file images.
The images can be .jpg, .gif, etc. Again no problem.
However, when I try to create new <img …> elements with a ‘createElement’ function, I get major errors.
I think the problem is in the ‘AddImage()’ function in the code below.
Any ideas how to fix this? 😮
[code]
<html>
<head>
<title>Image Display</title>
<script type=”text/javascript” src=’ajaxcode.js’>
// From: http://www.hunlock.com/blogs/Ten_Javascript_Tools_Everyone_Should_Have
</script>
<script type=”text/javascript”>
// Just a stub function we’ll tell ajaxObject to call when it’s done
// callback functions get responseText, and responseStat respectively in their arguments.
// function fin(responseTxt,responseStat) { alert(responseStat+’ – ‘+responseTxt); }
function fin(responseTxt,responseStat) {
if (responseStat == 200) {
document.getElementById(‘TArea’).value = responseTxt;
} else { alert(‘Unable to load error: ‘+responseStat); }
}
function test(fname) {
if (fname == ”) return;
var test = new ajaxObject(fname,fin);
test.update();
}
</script>
<script type=”text/javascript”>
function AddImage(imgName) { alert(imgName);
var myLink = document.createElement(‘img’);
var mySrc = document.createAttribute(‘src’);
myLink.setAttribute(mySrc,imgName);
var myHigh = document.createAttribute(‘height’);
myLink.setAttribute(myHigh,’75px’);
var myWide = document.createAttribute(‘width’);
myLink.setAttribute(myWide,’75px’);
var spanAppend = document.getElementById(‘imgArea’);
spanAppend.appendChild(myLink);
}
function ShowImages() {
var str = ”;
var imgArr = document.getElementById(‘TArea’).value.split(‘n’);
for (var i=0; i<imgArr.length; i++) { AddImage(imgArr[i]); }
// document.getElementById(‘imgArea’).innerHTML = str;
}
</script>
</head>
<body>
Files to display
<select onchange=”test(this.value)”>
<option value=””>Select file</option>
<option value=”./tmp.txt”>2014</option>
</select>
<button onclick=”ShowImages()”>Show</button>
<br>
<textarea id=”TArea” rows=”10″ cols=”50″></textarea>
<div id=”imgArea”>
</div>
</body>
</html>