how to onclick change image between 3 images - javascript

Hi I am new to javascript and I want to change the image when I click the image. I can do this with 2 images, how do I do this with 3 images?
function change() {
var image = document.getElementById('changeimg');
console.log(image)
switch (image) {
case "image2":
document.getElementById('changeimg').src = "css3.png";
break;
default:
case "image3":
document.getElementById('changeimg').src = "javascript.png";
}
}
<h1 align="center">Change Image</h1>
<br>
<div class="container" align="center">
<img src="html5.png" style="height: 500px; width: 500px" id="changeimg" onclick="change()">
</div>

Just replace your real image name in the imgArr
var img = 0;
var imgArr = ["img1.png", "img2.png", "img3.png"]
function change() {
var image = document.getElementById('changeimg');
console.log("Current image => ", imgArr[img])
document.getElementById('changeimg').src = imgArr[img];
if (img == 2) img = 0;
else
img++;
}
<h1 align="center">Change Image</h1>
<br>
<div class="container" align="center">
<img src="html5.png" style="height: 500px; width: 500px" id="changeimg" onclick="change()">
</div>

Related

I want my image to disappear everytime I dblclick it

I have three image tags when I click one of the images in the webpage I don't it want to disappear it but when I dblclick I want it to disappear.
let img = document.querySelectorAll("img");
console.log(img)
let c = Array.from(img);
console.log(c);
c.forEach(function(imgs) {
imgs.addEventListener("click", function(e) {
let d = imgs;
d.addEventListener("dblclick", function(v) {
console.log(img)
// I want this eventlistener to make it disapear
document.querySelectorAll("image").innerHTML = "";
})
})
})
After I read your post again I have made some changes to my answer!
const imgs=document.querySelectorAll("img");
imgs.forEach(function(img){
img.addEventListener("dblclick", function(){
this.remove();
});
});
.box {
width: 220px;
padding: 20px;
background-color: #eee;
}
<div class="box">
Click the Image to remove it !
<br>
<img src="https://via.placeholder.com/200x200" style="width: 100%">
<br><br>
<img src="https://via.placeholder.com/200x200" style="width: 100%">
</div>
This works. Above answer works too.
let img = document.querySelectorAll("img");
console.log(img)
let c = Array.from(img);
console.log(c);
c.forEach(function(imgs) {
imgs.addEventListener("dblclick", function(e) {
imgs.style.display = "none";
})
})
<img src="https://via.placeholder.com/200x200" width=150 height=150>

Javascript DOM onclick not working for img src

I can't understand why the functions are not being called or if not that why the background image isn't being changed?
script tags:
<script type="text/javascript" >
function start()
{
document.body.style.backgroundImage = "url('sothback.png')";
document.body.style.backgroundSize = "100%";
document.body.style.backgroundRepeat = "repeat-y";
}
window.onload = start;
function cartman()
{
document.getElementById("image").style.src = "cartman.png";
}
function kenny()
{
document.getElementById("image").style.src = "kenny.png";
}
</script>
body:
<body>
<div style="width: 100%; height: 700px;">
<button onclick="kenny()">Kenny</button>
<button onclick="cartman()">cartman</button>
<div style="height: 400px;"></div>
<center><img src="kenny.png" alt="img" id="image" ></center>
</div>
</body>
Try with this
function cartman() {
document.getElementById("image").setAttribute('src','cartman.png');
}
function kenny() {
document.getElementById("image").setAttribute('src','kenny.png');
}
function start()
{
document.body.style.backgroundImage = "url('sothback.png')";
document.body.style.backgroundSize = "100%";
document.body.style.backgroundRepeat = "repeat-y";
}
window.onload = start;
function cartman()
{
document.getElementById("image").setAttribute('src',"cartman.png");
document.getElementById("image").setAttribute('alt',"Image of cartman");
}
function kenny()
{
document.getElementById("image").setAttribute('src',"kenny.png");
document.getElementById("image").setAttribute('alt',"Image of kenny");
}
</script>
<div style="width: 100%; height: 700px;">
<button onclick="kenny()">Kenny</button>
<button onclick="cartman()">cartman</button>
<div style="height: 400px;"></div>
<center><img src="kenny.png" alt="img" id="image" ></center>
</div>
Update the style.src to setAttribute.
Also consider setting alt tags and title for accessibility and screen readers.

JS upload cropper with two instances

I'm trying to upload a second img to the cropper that populates the second .img-result. The cropper should populae whatever was uploaded, and then when the save btn is pressed, the .img-result is updated.
I added the attribute data-up but I'm not sure how to call it in the JS.
// vars
var result = document.querySelector('.result'),
img_result = document.querySelector('.img-result'),
img_w = document.querySelector('.img-w'),
img_h = document.querySelector('.img-h'),
options = document.querySelector('.options'),
save = document.querySelector('.save'),
cropped = document.querySelector('.cropped'),
upload = document.querySelector('.file'),
cropper = '';
// on change show image with crop options
upload.addEventListener('change', function(e) {
if (e.target.files.length) {
// start file reader
var reader = new FileReader();
reader.onload = function(e) {
if (e.target.result) {
// create new image
var img = document.createElement('img');
img.id = 'image';
img.src = e.target.result;
// clean result before
result.innerHTML = '';
// append new image
result.appendChild(img);
// init cropper
cropper = new Cropper(img);
}
};
reader.readAsDataURL(e.target.files[0]);
}
});
// save on click
save.addEventListener('click', function(e) {
e.preventDefault();
// get result to data uri
var imgSrc = cropper.getCroppedCanvas({
width: img_w.value // input value
}).toDataURL();
// show image cropped
cropped.src = imgSrc;
});
.img-result {
border: 2px solid;
width: 50px;
height: 50px;
}
.img-result img {
max-height: 100%;
max-width: 100%;
}
.page {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
height: 100%;
}
.result {
display: flex;
}
.box {
padding: 0.5em;
width: 100%;
margin: 0.5em;
}
.box-2 {
padding: 0.5em;
width: calc(100%/2 - 1em);
}
.img-w {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="page">
<div class="box">
<div class="options">
<input type="number" class="img-w" value="300" min="100" max="1200" />
</div>
<button class="btn save">Save</button>
</div>
<div class="box">
<input class="file" type="file" id="file-input" data-up="1">
</div>
<div class="box">
<input class="file" type="file" id="file-input" data-up="2">
</div>
<div class="box-2">
<div class="result"></div>
</div>
<div class="result">
<div class="box-2 img-result">
<img class="cropped" src="" alt="" data-up="1">
</div>
<div class="box-2 img-result">
<img class="cropped" src="" alt="" data-up="2">
</div>
</div>
</main>
First of all, as I mentioned in comments. Id must be for each element of your DOM. So, you better change id="file-input" to id="file-input1" and so on.
And It looks like you want to get the attribute value data-up when save function called,
You can do that in this way
save.addEventListener('click', function(e) {
e.preventDefault();
// get result to data uri
document.getElementById('file-input1).getAttribute('data-up')
....

Hyperlink downloads whatever that img src is

Alright i can't really seem to find anything regarding EXACTLY what i'm doing.
Anyways i need to set a hyperlink to download an image. That image has an id already.
Everytime the user displays an image, the download link will download that image they have entered.
When you run the code, enter 255812 for image code.
function myFunction() {
var x = document.getElementById("imagetxt").value;
var y = "http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-" + x + ".jpg";
// Creating an image
var img = new Image();
// Defining the function if image loads successfully.
img.onload = function() {
document.getElementById("image1").src = y;
};
//Defining the function if image fails to load.
img.onerror = function() {
alert("Image not found");
};
img.src = y;
}
<body align="center">
<div>
<img src="http://i.imgur.com/dXo8Fxp.png" width="20%" height="20%">
</div>
<div>
<img src="http://i.imgur.com/jCOLCiU.png" width="8%" height="8%">
</div>
<div>
<input id="imagetxt" size="6" type="text" value="">
</div>
<div>
<input id="btn1" type="button" value="Display" onclick="myFunction()" style="top: 5px; position: relative;">
</div>
<div>
<img id="image1" src="" width="30%" height="30%" style="top: 10px; position: relative;">
</div>
DOWNLOAD THIS
Get rid of the onclick on the anchor tag
<a href="#" id="imageDL" download>DOWNLOAD THIS</a>
Set the anchor's href in the img.onload
img.onload = function() {
document.getElementById("image1").src = y;
document.getElementById("imageDL").href = y;
};
Add this to the end of myFunction
document.getElementById("imageDL").href = y;
function myFunction() {
var x = document.getElementById("imagetxt").value;
var y = "http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-" + x + ".jpg";
// Creating an image
var img = new Image();
// Defining the function if image loads successfully.
img.onload = function() {
document.getElementById("image1").src = y;
};
//Defining the function if image fails to load.
img.onerror = function() {
alert("Image not found");
};
img.src = y;
document.getElementById("imageDL").href = y;
}
<body align="center">
<div>
<img src="http://i.imgur.com/dXo8Fxp.png" width="20%" height="20%">
</div>
<div>
<img src="http://i.imgur.com/jCOLCiU.png" width="8%" height="8%">
</div>
<div>
<input id="imagetxt" size="6" type="text" value="">
</div>
<div>
<input id="btn1" type="button" value="Display" onclick="myFunction()" style="top: 5px; position: relative;">
</div>
<div>
<img id="image1" src="" width="30%" height="30%" style="top: 10px; position: relative;">
</div>
DOWNLOAD THIS

Showing image in webpage using knockout binding

this is my html code
<div class="fileupload fileupload-new" data-provides="fileupload">
<div data-bind="if: imgSrc">
<div class="fileupload-new thumbnail" style="width: 150px; height: 150px;"></div>
</div>
<div data-bind="ifnot: imgSrc">
<div class="fileupload-new thumbnail" style="width: 150px; height: 150px;"><img src="${pageContext.request.contextPath}/resources/ui_resources/img/profile_pic.png" /></div>
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 150px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" data-bind=" file: imgFile, fileObjectURL: imgSrc"/></span>
Remove
</div>
</div>
and I am binding like
var Patientp = function () {
this.id = ko.observable(idValue);
this.name = ko.observable(nameValue);
this.address = ko.observable(addressValue);
this.gender = ko.observable(genderValue);
//this.consultant= ko.observableArray(consultantArrValue);
this.username = ko.observable(usernameValue);
this.password = ko.observable(passwordValue);
this.email = ko.observable(emailValue);
this.mobile = ko.observable(mobileValue);
this.imgFile = ko.observable(imgFileValue);
this.imgSrc = ko.observable(imgSrcValue);
this.imagePath=ko.observable(imagePathValue);
this.userid=ko.observable(useridValue);
//this.consultant= ko.observableArray(consultantArrValue);
this.consultant= ko.observable(consultantValue);
}
idValue = '4';
useridValue = '6';
nameValue = 'fri1';
addressValue = 'fri1';
genderValue = 'Male';
mobileValue = '1234567890';
//these fields are not available
usernameValue = 'fri1';
passwordValue = '';
emailValue = 'fri1#fri1.com';
imgFileValue = 'fri1';
imgSrcValue='http://socialtv.s3.amazonaws.com/EmzSqEmzSq.jpg'
//imgSrcValue = 'http://socialtv.s3.amazonaws.com/EmzSqEmzSq.jpg';
imagePathValue = 'fri1';
//consultantArrValue = null;//'fri1';
consultantValue="d1";
//var doc={};
var projectUrl=$('#projectUrl').val();
and this is the fiddle
The problem is the actual image is not showing the image area instead a blank div area is showing as shown in the screenshot
Can anybody please tell me how to show the image?
Do you mean that you want to add <img data-bind="attr: {'src': imgSrcValue}" /> inside thumbnail div, like:
<div data-bind="if: imgSrc">
<div class="fileupload-new thumbnail" style="width: 150px; height: 150px;">
<img data-bind="attr: {'src': imgSrcValue}" />
</div>
</div>
You are setting the src without using a binding, so it wont work properly.
You do it like this:
Js
var model = function () {
this.imgPath = ko.observable("http://jsfiddle.net/img/logo.png");
}
ko.applyBindings(model);
Html
<img data-bind="attr:{src: imgPath}"></img>
(Fiddle)

Categories

Resources