I want to add the input file from html as a image inside a div however I don't want to use get element buy class name because I have multiple divs and for each one I want to add special image. if I use any selector the image will be added to each div
any one can help . Thanks
I use this, this will change the image to all div having this class but I want to add a special img to each div
edit: iam creating a new div each time and i want for each div I created to add a special img
here is the full code to create new div and to add pic
mainspan.onclick = () => { // mainspan is button used to create div
let div = document.createElement("div");
div.classList.add("main-dd"); let button =
document.createElement("button"); let img =
document.createElement("img"); img.classList.add("currentimg");
div.appendChild(img); button.classList.add("btnaddinfo");
button.innerHTML = "Add item"; button.addEventListener("click", ()
=> {
addinfo.style.display = "block"; // the menue to add the new picture }); div.appendChild(button);
const uploadPictureButton = document.querySelector(".photo-upload");
uploadPictureButton.addEventListener("change", function () {
displayPicture(this); });
function displayPicture(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document
.querySelector(".currentimg")
.setAttribute("src", e.target.result);
};
reader.readAsDataURL(input.files[0]);
} } }; })
document.querySelector(".photo-upload");
uploadPictureButton.addEventListener("change", function () {
displayPicture(this); }); let a; function displayPicture(input) { if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document
.querySelector(".currentimg")
.setAttribute("src", e.target.result);
};
reader.readAsDataURL(input.files[0]);
} }
You probably want to use URL.createObjectURL
document.querySelector("input").addEventListener("change",event=>{
document.querySelector("img").src = URL.createObjectURL(event.target.files[0]);
})
body {
display: grid;
grid: 1fr 1fr / 1fr;
}
img {
width:4em;
height: 4em;
}
<input type="file" accept="image/png, image/jpeg"/>
<img/>
Related
I'm trying to define the image that appears when I drag an element inside my page.
I saw how to do it with DataTransfer.setDragImage() in that link but with me it is not working.
There are two differences between my code and the example:
I'm trying to make this change through the DragEnter event while the link is done in DragStart;
The image to be dragged will be in the user's file explorer, not in the HTML document.
I already did a test and the image is being generated correctly.
This is the code responsible for this functionality:
function handleDragEnter(event)
{
const img = new Image;
const reader = new FileReader;
reader.readAsDataURL((new Blob(icon(faPhotoFilmMusic).html, { type: 'image/svg+xml' })));
reader.addEventListener('load', () => {
img.src = reader.result;
event.dataTransfer.setDragImage(img, 10, 10);
});
}
I think the problem is in missing parentheses:
function handleDragEnter(event)
{
const img = new Image(); // <=== change this
const reader = new FileReader(); // <=== change this
reader.readAsDataURL((new Blob(icon(faPhotoFilmMusic).html, { type: 'image/svg+xml' })));
reader.addEventListener('load', () => {
img.src = reader.result;
event.dataTransfer.setDragImage(img, 10, 10);
});
}
How can I use several click events on the same element in JavaScript?
I try to make that when I click on the h3 element it opens its description and then I again click on the element it closes the description.
var p, img, question;
function clickOn(){
img = document.getElementsByClassName('down-arrow')[0];
p = document.querySelectorAll('p')[0];
p.setAttribute('class','show-text');
/*img.setAttribute('class','show');*/
}
function clickOff(){
img = document.getElementsByClassName('down-arrow')[0];
p = document.querySelectorAll('p')[0];
p.removeAttribute('class','show-text');
/*img.removeAttribute('class','show');*/
}
question = document.getElementsByClassName('question')[0];
question.addEventListener('click', clickOn, false);
question.addEventListener('click', clickOff, false);
Try using toggle for adding and removing class https://www.w3schools.com/howto/howto_js_toggle_class.asp:
var p, img, question;
function clickOn(){
img = document.getElementsByClassName('down-arrow')[0];
p = document.querySelectorAll('p')[0];
p.classList.toggle('show-text');
}
question = document.getElementsByClassName('question')[0];
question.addEventListener('click', clickOn, false);
You can declare a global variable
var isTextDisplayed = false;
Then you can call same event listener and open or close the description on basis of the bit. For example
document.getElementById("myBtn").addEventListener("click", function() {
if(!isTextDisplayed) {
//HIDE DESCRIPTION CODE
}
else {
//SHOW DESCRIPTION CODE
}
isTextDisplayed = !isTextDisplayed;
});
Full code:
var isTextDisplayed = false;
var description = document.getElementById("description");
document.getElementById("myBtn").addEventListener("click", function() {
if(!isTextDisplayed) {
description.style.display = 'none';
}
else {
description.style.display = 'block';
}
isTextDisplayed = !isTextDisplayed;
});
<h3 id="myBtn">CLICK TO TOGGLE DESCRIPTION</h3>
<p id="description">
Some dummy text for description goes here in the block
</p>
For demo, see JSFIDDLE CODE
I want to do:
after clicking plus sign, insert image instead of plus sign
create new plus sign after added image
My codepen demo:
CodePen
function readImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.cert img').attr('src', e.target.result);
$('.cert label').css('opacity', '0');
}
reader.readAsDataURL(input.files[0]);
}
}
This isn't quite perfect, but it works to load multiple images and does clean up the duplicated ID. You can try it in your CodePen JS box:
function readImage(input, element) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$(element).find("img").attr("src", e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$("#certImg0").change(function() {
var element = $(this)
.parent()
.clone();
$(element).find('input').remove();
$(element).find('label').remove();
element.insertAfter($(this).parent());
readImage(this, element);
});
The intent of this is to take the element that is generated and pass the actual element that was created to the readImage function and the new image that is loaded is directly stored in the img element on the new div structure.
(This could be optimized to generate only the div with the img element, and that would make it so that the new images are not clickable. In fact, I modified the code to do that- deleting the input and label from the cloned element.)
function create_button() {
var img = document.createElement("img");
img.src ="img/Play.png";
img.addEventListener("click", function () {
alert("aye");
});
document.getElementById("canvas").appendChild;
}
Wanting to know how i can do this. I am trying to make an image in javascript be a button. Is there a better way than how i am doing it?
function button1 () {
var btn = document.createElement("BUTTON");
var myimg = document.getElementById("myImg").src = "Play.png";
alert(myimg); // "Play.png", myimg is a string, not a DOM element
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
btn.appendChild(myImg);
document.body.appendChild(btn);
}
This stuff isn't rocket science right? Just write it simply and step by step:
function create_button() {
var button = document.createElement("button");
var img = document.createElement("img");
img.src = "Play.png";
button.appendChild(img);
document.body.appendChild(button);
}
This will make the image clickable:
function create_button() {
var img = document.createElement("img");
img.addEventListener("click", function () {
alert("hi");
});
document.body.appendChild(img);
}
You can also style the button to make it look like it's not there:
button.nochrome {
border: none;
background: none;
padding: 0;
margin: 0;
}
https://jsfiddle.net/fnno6r3g/
Just attach an event listener to your img with javascript:
<img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" height="200px"/>
<script>
document.querySelector("img").addEventListener("click", function(){
alert("do something");
});
</script>
Then it will act as a "button" - it does something when you click it
I want drop jpg to Browser from local, and display it on Browser.
I write code, but it don't display jpg.
Please advice.
html
<img id="img1" ondragover="doDragOver(event);"
ondrop="doDrop(event);"
class="droppable">
css
.droppable {
width:500px;
height:500px;
background-color: gray;
}
script
function doDragOver(event){
var type = event.dataTransfer.types.contains("Files");
if (type){
event.preventDefault();
}
}
function doDrop(event){
var img = document.getElementById("img1");
var file = event.dataTransfer.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
img.src = reader.result;
}
}
The problem is that the dragOver function the type list is empty (to it's empty in some browsers), but why check it content? You can check it in the drop function.
Be sure to cancel the default browser behavior using event.preventDefault(); and return false
Code:
function doDragOver(event) {
event.preventDefault();
return false
}
function doDrop(event) {
event.preventDefault();
var img = document.getElementById("img1");
var file = event.dataTransfer.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
img.src = reader.result;
}
}
Demo: http://jsfiddle.net/IrvinDominin/Up2NF/