Issue
I am trying to load different content onclick
of different button controls. Since I am new to JavaScript and don't know where I am doing wrong.
It will be highly appreciated if there is any help from any one of you!
The code of which is here:
(function () {
var getText = document.getElementById('text'),
getSmallImage = document.getElementById('smallimage'),
getLargeImage = document.getElementById('largeimage');
function ChangeState(event) {
var myDiv = document.createElement('div');
myDiv.className = 'dynamicDiv';
document.body.appendChild(myDiv);
//style the div
var a = document.getElementsByClassName('dynamicDiv')
for (var i in a) {
a[i].style.width = '400px';
a[i].style.height = '400px';
a[i].style.color = 'rgb(255,255,0)';
a[i].style.background = 'rgb(0,102,153)';
a[i].style.padding = '10px';
}
if (event.target.id == getText) {
myDiv.appendChild(document.createTextNode('This is my div'));
}
else if (event.target.id == getSmallImage) {
var smallImage = document.createElement('img');
smallImage.src = 'Images/smallimage.jpg';
myDiv.appendChild(smallImage);
}
else if (event.target.id == getLargeImage) {
var largeImage = document.createElement('img');
largeImage.src = 'Images/largeimage.jpg';
myDiv.appendChild(largeImage);
}
}
getText.addEventListener('click', ChangeState, false);
getSmallImage.addEventListener('click', ChangeState, false);
largeimage.addEventListener('click', ChangeState, false);
}
());
and the HTML code is here:
<input id="text" type="button" value="Click to load Text" />
<input id="smallimage" type="button" value="Click to load Small Image" / />
<input id="largeimage" type="button" value="Click to load Large Image" />
and same code is on jsfiddler as well:
http://jsfiddle.net/shabirgilkar/c7fBk/
Solution
This problem had been fixed by my friends help and many thanks to @teemu for what ever you did. The resolved code is given below:
(function () {
function ChangeState(event) {
var myDiv = document.createElement('div');
//style the div
myDiv.className = 'dynamicDiv';
myDiv.style.color = 'rgb(255,255,0)';
myDiv.style.background = 'rgb(0,102,153)';
myDiv.style.padding = '10px';
document.body.appendChild(myDiv);
if (event.target.id == 'text') {
myDiv.appendChild(document.createTextNode('Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.'));
}
else if (event.target.id == 'smallimage') {
var smallImage = document.createElement('img');
smallImage.src = 'Images/smallimage.jpg';
myDiv.appendChild(smallImage);
}
else if (event.target.id == 'largeimage') {
var largeImage = document.createElement('img');
largeImage.src = 'Images/largeimage.jpg';
myDiv.appendChild(largeImage);
}
}
document.getElementById('text').addEventListener('click', ChangeState, false);
document.getElementById('smallimage').addEventListener('click', ChangeState, false);
document.getElementById('largeimage').addEventListener('click', ChangeState, false);
}
());
I hope this will be helpful for some one!
Answered By - Shabir Gilkar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.