I have 3 images. What i want to do is when i click on any one of the image a random image should be displayed on a div.
Here is the code. Help please.
var iarr=["1.jpg","2.jpg","3.jpg"];
function select()
{
var random=Math.floor(Math.Random()*3);
document.getElementById('disp').innerHTML = iarr[random];
}
<html>
<body>
<h4> MAKE A CHOICE </h3>
<img id='x' onclick="select" src='1.jpg'/>
<img id='y' onclick="select" src='2.jpg'/>
<img id='z' onclick="select" src='3.jpg'/>
<div id='disp'/>
var iarr=["1.jpg","2.jpg","3.jpg"];
function select(){
var random = Math.floor(Math.random() * iarr.length);
var div = document.getElementById('disp');
var image = "<img src=\"" + iarr[random] + "\"/>";
div.innerHTML = image;
}
<html>
<body>
<h4> MAKE A CHOICE </h4>
<img id='x' onclick="select()" src='1.jpg'/>
<img id='y' onclick="select()" src='2.jpg'/>
<img id='z' onclick="select()" src='3.jpg'/>
<div id='disp'/>
Working example: https://jsfiddle.net/pndtdt7t/
var iarr = [
"http://www.wallpapers-for-desktop.com/desktopbilder_for_free/free_desktopbild.jpg",
"http://wikiin.com/media/images/15/04/21/cfe0fdfb23.jpg",
"http://data.whicdn.com/images/89382997/large.jpg"
];
function select() {
var img = "<img src=\""+iarr[Math.floor(Math.random() * iarr.length)]+ "\" />";
document.getElementById('disp').innerHTML = img;
}
<html>
<body>
<h4> MAKE A CHOICE </h3>
<img id='x' onclick="select()" src='1.jpg'/>
<img id='y' onclick="select()" src='2.jpg'/>
<img id='z' onclick="select()" src='3.jpg'/>
<div id='disp'/>
Related
I have working javascript code that produces multiple random images in to one div.
I have tried a few attempts to display each random image in a separate div but with no luck. I got "close" but no success.
Here is working code:
<head>
<style>
.onetwothreefour {
width: 25%;
display: inline-block;
}
</style>
<script>
function displayNow() {
var images = ["00.png","01.png","02.png","03.png","04.png","05.png","06.png"];
var selectedIndices = []
while (selectedIndices.length < 4) {
var index = images[Math.floor(Math.random() * images.length)]
if (selectedIndices.indexOf(index) == -1) {
selectedIndices.push(index)
}
}
for (i = 0; i < selectedIndices.length; i++) {
var img = document.createElement("img");
img.src = "imagesfolder/" + selectedIndices[i]
img.className = "onetwothreefour"
var src = document.getElementById("images");
src.appendChild(img);
}
}
</script>
</head>
<body onLoad="displayNow();">
<div id="images"><!-- Images --></div>
<!-- the above works fine but I would like the result below -->
<div class="container"><div class="row">
<div id="" class=""><img src="" id="" class=""></div>
<div id="" class=""><img src="" id="" class=""></div>
<div id="" class=""><img src="" id="" class=""></div>
<div id="" class=""><img src="" id="" class=""></div>
</div></div>
</body>
Note: I have jquery and bootstrap loaded.
I appreciate any help.
Explaination : The while loop runs for four times. A random index is generated, and the element is removed from images array, and pushed into selectedIndices array. By this way, no iteration will be wasted, as each time, a unique image will be generated. I have used forEach loop, which iterates over all the elements of selectedIndices array.
NOTE : The comment inside the forEach loop is a one line way to do so. However, using innerHTML is not appreciated sometimes.
function displayNow() {
var images = ["00.png", "01.png", "02.png", "03.png", "04.png", "05.png", "06.png"];
var selectedIndices = [];
var src = document.getElementById("images");
while (selectedIndices.length < 4) {
let index = Math.floor(Math.random() * images.length);
let img = images.splice(index, 1)[0];
selectedIndices.push(img)
}
selectedIndices.forEach((el) => {
let img = new Image();
img.src = "imagesfolder/" + el;
img.alt = el;
img.className = "onetwothreefour";
let imgCont = document.createElement("div");
imgCont.append(img);
src.append(imgCont);
// src.innerHTML += "<div><img class='onetwothreefour' src='imagesfolder/" + el + "' alt='" + el + "'></div>";
});
}
.onetwothreefour {
width: 25%;
display: inline-block;
}
<body onLoad="displayNow();">
<div id="images"></div>
<div class="container">
<div class="row">
<div id="" class=""><img src="" id="" class=""></div>
<div id="" class=""><img src="" id="" class=""></div>
<div id="" class=""><img src="" id="" class=""></div>
<div id="" class=""><img src="" id="" class=""></div>
</div>
</div>
</body>
You're already using createElement() to build the img elements - you can use the same method to create a new div, add the child img to it, then append that to the DOM. Try this:
function displayNow() {
var src = document.getElementById("images");
var images = ["00.png", "01.png", "02.png", "03.png", "04.png", "05.png", "06.png"];
var selectedIndices = []
while (selectedIndices.length < 4) {
var index = images[Math.floor(Math.random() * images.length)]
if (selectedIndices.indexOf(index) == -1) {
selectedIndices.push(index)
}
}
for (i = 0; i < selectedIndices.length; i++) {
var img = document.createElement("img");
img.src = "imagesfolder/" + selectedIndices[i]
img.className = "onetwothreefour";
img.title = selectedIndices[i]; // just for this demo
var div = document.createElement('div');
div.append(img);
src.append(div);
}
}
.onetwothreefour {
width: 25%;
display: inline-block;
}
<body onLoad="displayNow();">
<div id="images">
<!-- Images -->
</div>
<!-- the above works fine but I would like the result below -->
<div class="container">
<div class="row">
<div id="" class=""><img src="" id="" class=""></div>
<div id="" class=""><img src="" id="" class=""></div>
<div id="" class=""><img src="" id="" class=""></div>
<div id="" class=""><img src="" id="" class=""></div>
</div>
</div>
</body>
I am trying to print img by creating a new div and then appending it with image but image is not getting displayed.
HTML
<body>
<div id="col" class="container-fluid">
<h2>Rock Paper Scissor</h2>
<div class="row">
<div id="col-1" class="col-lg-4">
<img id="rock"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTNKl4bKaZufRk7DkQGewkv4cNYlQ0qpkdyA&usqp=CAU"
alt="" onclick="rpsGame(this)">
</div>
<div class="col-lg-4">
<img id="paper"
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ8NDQ0NFREWFhURFRUYHSggGBolGxUVITEhJSkrLi4uFx8/ODMtNygtLjIBCgoKDg0NFQ8PGysZFRkrLSsrKystKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAQgAvwMBIgACEQEDEQH/xAAbAAEBAQEBAQEBAAAAAAAAAAAAAQUCAwQGB//EAEEQAQABAQMGCAoIBwEAAAAAAAABAgMEBREzUYGRsQYSEzEycXLBIzRBQkRTkqLR0hQhJENzk6PhIlJUYYKh4hb/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAQL/xAAXEQEBAQEAAAAAAAAAAAAAAAAAAREh/9oADAMBAAIRAxEAPwD+4gz73VMVzkmfJ5f7A0Bk8edM7ZOPVpnbK4NYZHHq0ztlePV/NO2TBrDJ49WmdsnHq0ztkwawyePVpnbJx6tM7ZMGsMnj1aZ2yvHnTO2TBqjL486Z2ycedM7ZMGoMvlJ0ztlOUq0ztkwaoyePVpnbKcpVpnbJg1xkcpVpnbJx6tM7ZMGuMnj1aZ2ycer+adsmDWHz3KctEZfr+ued9CAzb3nKtW5pM2+ZyrVuWDyRYJURUyKCCgIqwAmRcigJCgCIqAS5lQEVFAAB91wn+DXL6nyYf0Z65fWyDNvmcnVuaTNvmcq1blg8VSFURUUDIoAKAAAAICAAgAAAAQoPsw/mnrfW+TD+aet9bIM2+ZyrVuaTNvceEq1blg8YUVRFRQFAFEUBFQBFSQQAEFQAAFQWQfXh/NPW+x8WHed1vtZBm3vp1atzSZt7zlWrcsHlCpCqIqOgAAUAARQRJUkERQERUAABUAH1Yd53W+58GHc9XX3PvZBm3vOVatzSZt8zlWrcsHkrlVBUh1AAKBAAAAIKAiKA5kWUARQEygA98N6VfXG6GizcN6VfXG6GkyDNvecq1bmkzr3nKtW5YPFUhVBYRQFRQBUAUABFBMgoDmUdSgIZFMgOUdgO8N6dp1xuhpMzDc5adcboabIM695yrVuaLOvecq1blg8gFBYly6BRFBRFAABFAAAERQBABYAAw3OWvajdDUZOGz4W17UboazIM695yrVuaLNvmcnVuWDzEhVEdQ5UFVFACABUUAAAAERUAEMoKADjDZ8Na9qN0Nhi4bPh7btRuhtMgzb5nJ1bmkzL7nJ6o3LB5wOVUVUUFVzCgqoALAAAAIqAkyiy5ygAAsKkSA8cNnw9r2o3Q3GFhk/aLbtRuhusgzL/AD4TVDTZeI5zVCweMSrimXSjpXOVYB1CpCwCgAoigCKAkiSBLlZQARYAhRYB8uGeMW3b7ob8Pz2GT9ptu33Q/QwyDKxLOf4x3tVlYnnP8Y3ysHzw6ecS6UdZXUS4h1AO4lcrmFB0qQAoABIgAJIIiygCooKsEAPhw2ftVv2+6H6KH5zDJ+1W/b7ofo4ZFZWJ9OOz3tVlYn046iD5SJc5VytDqJdxLyh3Eg7iXUOIl1Eg7hXMS6BQQFQJBEVAEUAWEdQApADNw3xu37fdD9LD8zhvjdv2+6H6aGRWVinTjqarJxTpR1SQfGSmVJlodZXUS8sruJB6xLqJecS6iQesOoecOokHYigEhIIi5AEFAXIADoIAZWHeN2/4ndD9PHM/MYd45b/id0P08czIrKxTpR1NVlYn046gfDLmXcw5mGhy6hMjqmAdUy7hxTD0pgHUO4cRDuIB0LEGQAUBAUEBQQUAUgBk4d45b/id0P1FPM/L4f45b/id0P1FPMyKxMdvVNj/AB1RMxEc1OTL/ttsXhBc5tqckA/N1cLLtzclb+zR8x/6q7z91b+zR8yWXBeZnLMNCw4LU+WDaPhjhNYzzWNvso+Z6U8ILOfuLfZR8WxZcHLOPI+uzwSyjyQbRhU43TP3Ft7nxe1OLZfuLX3fi36cMs482HrTcrOPNjYDBoxKfUWvu/F6036fUWnutyLtRojY6ixp0QDFi91epr20r9Kr9TXthtclToXk40AxfpNfqavahPpNp6ir2o+Db5ONBycaAYc3u09RPt/s4m+2v9PP5n7N/k40JyVOgH52rEbaPRv1P2eVWK28ejfqf8v002NOiHM3aifJGwH5WvG7ePRY/Mn5XhVwhvEei0+3PwfrqrlZz5I2PKrDLOfNgH5CrhPeI9Go9qp5VcK7z/T2Xv8Axfra8Fsp82HzWnB+znyHRl8Hreq1tarWqIpqrnjTEZckT/bK/Y08zLuGFxZT9TUgFSaYkAIpjQoAAAAAAAAAAAAAAAAAAAAA/9k="
alt="" onclick="rpsGame(this)">
</div>
<div class="col-lg-4">
<img id="scissor" onclick="rpsGame(this)"
src="data:image/jpeg;base64,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"
alt="">
</div>
</div>
</div>
<script src="index.js" async defer></script>
</body>
JS
Here rpsGame is the main function and function rpsFrontEnd is called and the parameters for rpsFrontEnd are correct.
function rpsGame(yourChoice) {
var humanChoice = yourChoice.id;
var botChoice = noToChoice(randTorpsInt());
console.log("bot choice " + botChoice);
console.log("your choice " + humanChoice);
var results = decideWinner(humanChoice, botChoice);
console.log(results);
var message = finalMessage(results);
console.log(message);
rpsFrontEnd(humanChoice, botChoice, message);
}
This rpsFrontend first removes all images and then create a new div and append an img into it but img is not getting printed
function rpsFrontEnd(humanImageChoice, botImageChoice, finalMessage) {
var imageDatabase = {
"rock": document.getElementById("rock").src,
"paper": document.getElementById("paper").src,
"scissor": document.getElementById("scissor").src
}
document.getElementById("rock").remove();
document.getElementById("paper").remove();
document.getElementById("scissor").remove();
var humanDiv = document.createElement("div");
var botDiv = document.createElement("div");
var messageDiv = document.createElement("div");
humanDiv.innerHTML="<img src'"+imageDatabase[humanImageChoice]+"'>";
console.log(humanDiv);
document.getElementById("col").appendChild(humanDiv);
}
Thanks for your time!
document.getElementById("row").appendChild(humanDiv);
This line isn't working because you don't have an element with the ID row in your HTML - it is a class so getElementById isn't finding it.
Change this
<div class="row">
to this
<div id="row">
After one hour I got answer very small error
humanDiv.innerHTML="<img src='"+imageDatabase[humanImageChoice]+"'>";
an equal to sign was missing in innerHtml again thanks to those who gave here time
I have created input fields dynamically. After choosing file, I want to preview each image. But I can preview only first one. Run the code snippet below to understand me.
I would be glad if someone can help me.
$(document).ready(function () {
$("#imageBrowes").change(function () {
var File = this.files;
if (File && File[0]) {
ReadImage(File[0]);
}
})
})
var ReadImage = function (file) {
var reader = new FileReader;
var image = new Image;
reader.readAsDataURL(file);
reader.onload = function (_file) {
image.src = _file.target.result;
image.onload = function () {
var height = this.height;
var width = this.width;
var type = file.type;
var size = ~~(file.size / 1024) + "KB";
$("#targetImg").attr('src', _file.target.result);
$("#description").text("Size:" + size + ", " + height + "X " + width + ", " + type + "");
$("#imgPreview").show();
var html = '';
html += '<div class="col-md-6"> <div class="btn "> <input type="file" name="Photo" id="imageBrowes" class="inputfile" multiple /> </div> <div id="imgPreview" class="thumbnail" style="display:none"> <img class="img-responsive img-fluid" id="targetImg" /> <div class="caption"> <i class="fas fa-trash-alt"></i> <span id="description"></span> </div> </div> </div>';
$('#newRow').append(html);
}
}
}
<div id="newRow">
<div class="col-md-6">
<div class="btn ">
<input type="file" name="Photo" id="imageBrowes" class="inputfile" multiple />
</div>
<div id="imgPreview" class="thumbnail" style="display:none">
<img class="img-responsive img-fluid" id="targetImg" />
<div class="caption">
<i class="fas fa-trash-alt"></i>
<span id="description"></span>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
What do you think of that solution?
$(document).ready(function() {
attachFileChangeHandler()
})
function attachFileChangeHandler() {
$(".imageBrowse").change(function() {
var File = this.files;
if (File && File[0]) {
ReadImage($(this).parent().parent(), File[0]);
}
})
}
function createNewFileInput() {
var html = '';
html += `
<div class="col-md-6">
<div class="btn">
<input type="file" name="Photo" class="inputfile imageBrowse" multiple />
</div>
<div class="thumbnail imgPreview" style="display:none">
<img class="img-responsive img-fluid targetImg"/> <div class="caption">
<a href="#" id="Clearphoto">
<i class="fas fa-trash-alt"></i></a>
<span class="description"></span>
</div>
</div>
</div>`;
$('#newRow').append(html);
setTimeout(attachFileChangeHandler, 100)
}
var ReadImage = function(parent, file) {
var reader = new FileReader;
var image = new Image;
reader.readAsDataURL(file);
reader.onload = function(event) {
var data = event.target.result;
image.src = data;
image.onload = function() {
var height = this.height;
var width = this.width;
var type = file.type;
var size = ~~(file.size / 1024) + "KB";
parent.find(".targetImg").attr('src', data);
parent.find(".description").text("Size:" + size + ", " + height + "X " + width + ", " + type + "");
parent.find(".imgPreview").show();
createNewFileInput();
}
}
}
<div id="newRow">
<div class="col-md-6">
<div class="btn ">
<input type="file" name="Photo" class="inputfile imageBrowse" multiple />
</div>
<div class="thumbnail imgPreview" style="display:none">
<img class="img-responsive img-fluid targetImg" />
<div class="caption">
<a href="#" id="Clearphoto">
<i class="fas fa-trash-alt"></i>
</a>
<span class="description"></span>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I am trying to append two different JSON items per div. I empty the div before looping through the json and then append the objects.
But I need to append two per div and each item has to be different.
Eg. div1 has img1 & img2, div2 has img3 & img4 etc.
This is the result I am getting -
<div class="gallery-sub-slider">
<div>
<img class="img1">
<img class="img2">
<img class="img3">
<img class="img4">
<img class="img5">
</div>
<div>
<img class="img1">
<img class="img2">
<img class="img3">
<img class="img4">
<img class="img5">
</div>
</div>
But this is the result that I need -
<div class="gallery-sub-slider">
<div>
<img class="img1">
<img class="img2">
</div>
<div>
<img class="img3">
<img class="img4">
</div>
<div>
<img class="img5">
<img class="img6">
</div>
</div>
$.each(data.carImages, function(i){
counter++;
imgLink = data.carImages[i].imgLink;
console.log(counter);
$('.gallery-slider').append('<div><img src="' + imgLink + '" class="gallery-img" data-tag="' + i + '"></div>');
$('.gallery-sub-slider').append('<div class="sub-gallery-item" data-index="' + i + '"></div>');
$('.gallery-sub-slider div').append('<img src="' + imgLink + '" class="sub-gallery-img" data-tag="1"><img src="' + imgLink + '" class="sub-gallery-img">');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Rather than looping through each data.carImage, you can consider first calculating the number of divs you will require:
var divCount = Math.ceil(data.carImages.length / 2)
And loop through those:
for (var i = 0; i < divCount; i++) {
var firstImgIndex = i*2;
var secondImgIndex = firstImgIndex + 1;
var firstImg = data.carImages[firstImgIndex];
var secondImg = data.carImages[secondImgIndex];
// create your div now, with your first and second img, but you might have to check that secondImg !== null or undefined
}
I have the following html:
<div id="prog" class="downloads clearfix">
<div class="item">
<div class="image_container">
<img src="/img/downloads/company.png" width="168" height="238" alt="">
</div>
<div class="title">
pricelist: <label id="pr1"></label>
</div>
<div class="type">
pdf document
</div>
<div class="link">
<a id="pdfdocument" class="button" target="_blank" href="#">start Download </a>
</div>
</div>
</div>
I want build HTML which is inside the <div id="prog"> with Javascript:
<div id="prog" class="downloads clearfix"></div>
I'm trying to use this Javascript, but without success:
var tmpDocument, tmpAnchorTagPdf, tmpAnchorTagXls, parentContainer, i;
parentContainer = document.getElementById('prog');
for (i = 0; i < documents.length; i++) {
tmpDocument = documents[i];
tmpAnchorTagPdf = document.createElement('a id="pdfdocument" ');
tmpAnchorTagPdf.href = '/role?element=' + contentElement.id + '&handle=' + ope.handle;
tmpAnchorTagPdf.innerHTML = 'start Download';
tmpAnchorTagXls = document.createElement('a');
tmpAnchorTagXls.href = '/role?element=' + contentElement.id + '&handle=' + ope.handle;
tmpAnchorTagXls.innerHTML = 'start Download';
parentContainer.appendChild(tmpAnchorTagPdf);
parentContainer.appendChild(tmpAnchorTagXls);
}
If this is a section of code that you will be using more than once, you could take the following approach.
Here is the original div without the code you want to create:
<div id="prog" class="downloads clearfix">
</div>
Create a template in a hidden div like:
<div id="itemtemplate" style="display: none;">
<div class="item">
<div class="image_container">
<img src="/img/downloads/company.png" width="168" height="238" alt="">
</div>
<div class="title">
pricelist: <label></label>
</div>
<div class="type">
pdf document
</div>
<div class="link">
<a class="button" target="_blank" href="#">start Download </a>
</div>
</div>
</div>
Then duplicate it with jquery (OP originally had a jquery tag; see below for JS), update some HTML in the duplicated div, then add it to the document
function addItem() {
var item = $("#itemtemplate div.item").clone();
//then you can search inside the item
//let's set the id of the "a" back to what it was in your example
item.find("div.link a").attr("id", "pdfdocument");
//...the id of the label
item.find("div.title label").attr("id", "pr1");
//then add the objects to the #prog div
$("#prog").append(item);
}
update
Here is the same addItem() function for this example using pure Javascript:
function JSaddItem() {
//get the template
var template = document.getElementById("itemtemplate");
//get the starting item
var tempitem = template.firstChild;
while(tempitem != null && tempitem.nodeName != "DIV") {
tempitem = tempitem.nextSibling;
}
if (tempitem == null) return;
//clone the item
var item = tempitem.cloneNode(true);
//update the id of the link
var a = item.querySelector(".link > a");
a.id = "pdfdocument";
//update the id of the label
var l = item.querySelector(".title > label");
l.id = "pr1";
//get the prog div
var prog = document.getElementById("prog");
//append the new div
prog.appendChild(item);
}
I put together a JSFiddle with both approaches here.