Develop Reference

How to add onclick function with javascript append?

The onclick handler function closeTab() doesn't work on appended elements.
HTML:
<li id="listid" class="first-tab">
<img class="cmd-icon" id="cmdicon" src="resources/img/cmd.png">
<a id="atext">Mozilla Firefox</a>
<img onclick="closeTab()" id="deleteTab" class="deleteicon" src="resources/img/delete-icon.svg">
<img onclick="addTab()" id="addTab" class="addplus" src="resources/img/add.svg">
</li>
JavaScript:
function closeTab() {
var whereTab = document.getElementById('listid');
if (whereTab.style.display == 'block') {
whereTab.style.display = 'none';
} else {
whereTab.style.display = "none";
}
}
function addTab() {
var img = document.createElement("img");
img.src = "resources/img/delete-icon.svg";
var img2 = document.createElement("img");
img2.src = "resources/img/cmd.png";
img.className = 'deleteicon';
img.id = "deletetab";
img.onclick = closeTab();
var ulLocation = document.getElementsByClassName('abc')[0];
var whereTab = document.getElementById('listid');
var addTab = document.createElement('li');
addTab.className = 'first-tab';
addTab.id = "listid";
addTab.className = 'active';
addTab.innerHTML = "mozilla-firefox/newtab";
addTab.appendChild(img2);
ulLocation.appendChild(addTab);
addTab.appendChild(img);
}
Why doesn't the closeTab() function work on appended items via addTab()?

Instead of img.onclick = closeTab();, you need img.onclick = closeTab;- you need to assign the function not execution.

I want to make this a global variable but I dont know what Im doing wrong replacing image src code

I have a problem with turning this each function statement into a global variable, can anybody help me out?
$(document).ready(function(){
var imageurl = '';
var imageSrc = "";
$(".card__image").each(function(){
var imageurl = this;
var imagesrc = "";
//imageData = $(this).data('src');
imagesrc = $(this).attr("src");
imagesrc = imagesrc.replace('http://*', 'https://*');
imageSrc = imagesrc;
//console.log(imagesrc);
return imageSrc;
});
console.log(imageSrc);
//alert(imagesrcrw);
});

Consider the following example.
$(function() {
var allImgSrc = [];
var imagesrc;
$(".card__image").each(function(i, el) {
imagesrc = $(el).attr("src").replace('http://', 'https://');
$(el).attr("src", imagesrc);
allImgSrc.push(imagesrc);
});
console.log(allImgSrc);
});
This defines an Array called allImgSrc. We then loop over all .card__image elements and replace the src attribute.
In the console, you should see the populated array.
See More
https://api.jquery.com/each/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

How do I add image elements to a div in javascript without using innerHTML?

I am trying to add an image to the html page with just javascript and I have to do it without using innerHTML. I can't seem to get the images to appear at all.
javascript
var galleryPhotos = ["gallery/galleryphoto0.jpg", "gallery/galleryphoto1.jpg", "gallery/galleryphoto2.jpg", "gallery/galleryphoto3.jpg", "gallery/galleryphoto4.jpg"];
function newImage(){
var ele0 = document.createElement("img");
var image = document.getElementById("image");
ele0.scr = galleryPhotos[0];
image.appendChild(ele0);
var ele1 = document.createElement("img");
var image = document.getElementById("image");
ele1.scr = galleryPhotos[1];
image.appendChild(ele1);
var ele2 = document.createElement("img");
var image = document.getElementById("image");
ele2.scr = galleryPhotos[2];
image.appendChild(ele2);
var ele3 = document.createElement("img");
var image = document.getElementById("image");
ele3.scr = galleryPhotos[3];
image.appendChild(ele3);
var ele4 = document.createElement("img");
var image = document.getElementById("image");
ele4.scr = galleryPhotos[4];
image.appendChild(ele4);
}
What I am trying to put it into in html
<div id="image"></div>
Using chromes debugging tool doesn't help me at all.

You have a typo: scr should be src.

Try this:
var galleryPhotos = ["gallery/galleryphoto0.jpg", "gallery/galleryphoto1.jpg", "gallery/galleryphoto2.jpg", "gallery/galleryphoto3.jpg", "gallery/galleryphoto4.jpg"];
function newImage(){
var image = document.getElementById("image");
var i = 0;
while(galleryPhotos[i]){
el = document.createElement("img");
el.src = galleryPhotos[i];
image.appendChild(el);
i++;
}
}

Creating dynamic div using javascript

<script>
function selecteditems()
{
var i=1;
var val="";
while(i<=53)
{
if(document.getElementById('timedrpact'+i)!="")
{
val+=document.getElementById('timedrpact'+i).value;
document.getElementById('showselecteditems').innerHTML=val;
}
i++;
}
}
</script>
How to create a new div and add contents to it?In the above case i lost previous content due to innerHTML.I want new div each time for dynamically attach an image and the above variable val to it.
Thanks in advance.

Check this Demo
<div id="output" class="out">
</div>
window.onload=function(){
var output = document.getElementById('output');
var i=1;
var val="";
while(i<=3)
{
if(!document.getElementById('timedrpact'+i))
{
var ele = document.createElement("div");
ele.setAttribute("id","timedrpact"+i);
ele.setAttribute("class","inner");
ele.innerHTML="hi "+i;
output.appendChild(ele);
}
i++;
}
};

Look at document.createElement() and element.appendChild().
var newdiv = document.createElement("div");
newdiv.innerHTML = val;
document.getElementById("showselecteditems").appendChild(newdiv);
Because you will likely encounter this in the near future: You can remove any element with this code:
element.parentNode.removeChild(element);

Using createElement:
function selecteditems() {
var container = document.getElementById('showselecteditems');
for (var i=1;i<=53;i++) {
var fld = document.getElementById('timedrpact'+i);
if (fld) {
var div = document.createElement("div");
div.appendChild(document.createTextNode(fld.value));
container.appendChild(div);
}
}
}
Full version using cloneNode (faster) and eventBubbling
Live Demo
var div = document.createElement("div");
var lnk = document.createElement("a");
var img = document.createElement("img")
img.className="remove";
img.src = "https://uperform.sc.gov/ucontent/e14c3ba6e4e34d5e95953e6d16c30352_en-US/wi/xhtml/static/noteicon_7.png";
lnk.appendChild(img);
div.appendChild(lnk);
function getInputs() {
var container = document.getElementById('showselecteditems');
for (var i=1;i<=5;i++) {
var fld = document.getElementById('timedrpact'+i);
if (fld) {
var newDiv = div.cloneNode(true);
newDiv.getElementsByTagName("a")[0].appendChild(document.createTextNode(fld.value));
container.appendChild(newDiv);
}
}
}
window.onload=function() {
document.getElementById('showselecteditems').onclick = function(e) {
e=e||event;
var target = e.target||e.srcElement;
// target is the element that has been clicked
if (target && target.className=='remove') {
parentDiv = target.parentNode.parentNode;
parentDiv.parentNode.removeChild(parentDiv);
return false; // stop event from bubbling elsewhere
}
}
getInputs();
}

Syntax for dynamic create div:
DivId = document.createElement('div');
DivId.innerHtml ="text"

how to use javascript to add link to image element created using javascript

how to add link for the image created using following javascript.
thanks for any help or replies.
for(var i=0; i<images.length; i++) {
var t = document.createElement('IMG');
t.setAttribute('src',images[i]);
t.setAttribute('border', 0);
t.setAttribute('width',imageWidth);
t.setAttribute('height',imageHeight);
t.style.position = 'absolute';
t.style.visibility = 'hidden';
el.appendChild(t);
}

Try this:
for(var i=0; i<images.length; i++)
{
var t = document.createElement('IMG');
var link = document.createElement('a'); // create the link
link.setAttribute('href', 'www.example.com'); // set link path
// link.href = "www.example.com"; //can be done this way too
t.setAttribute('src',images[i]);
t.setAttribute('border', 0);
t.setAttribute('width',imageWidth);
t.setAttribute('height',imageHeight);
t.style.position = 'absolute';
t.style.visibility = 'hidden';
link.appendChild(t); // append to link
el.appendChild(link);
}

You need to first create a anchor element then append the img element to it... like so:
for(var i=0; i<images.length; i++) {
var a = document.createElement('a');
a.href = "http://www.MYWEBSITE.com/"
var t = document.createElement('IMG');
t.setAttribute('src',images[i]);
t.setAttribute('border', 0);
t.setAttribute('width',imageWidth);
t.setAttribute('height',imageHeight);
t.style.position = 'absolute';
t.style.visibility = 'hidden';
a.appendChild(t);
el.appendChild(a);
}
Then append the anchor to 'el'
Matt

Create an a element in the same fashion. Append it to el instead of the image and append the image to it.