Develop Reference

i can't trigger alert with an image on jquery

the problem i have here is very annoying.What i wanna have is there is an empty box,i press a button and it places an image in that box,the code for that is:
HTML
<button id="rockb">choose rock!</button>
<div id="main">
<img id='pr' style="width: 500px;height: 600px;" src="">
</div>
As you can see the source of the image is nothing because i have to choose it
Jquery for choosing the source and placing it in the box:
<script type="text/javascript">
$('#rockb').click(function()
{
$('#mty').attr("src", "https://i.redd.it/2u0y0z5i12py.png");
}); </script>
just so you know there are multiple buttons so you can chose multiple images basiccaly the same as i show only other name and image link.
i want a script that says IF i press rockb it alerts 'paper' if i select paperb it says 'paper'
but i cant seem to make it work.here is my code:
<script type="text/javascript">
if (getElementById('#pr').attr('src') === 'https://i.redd.it/2u0y0z5i12py.png')
{
alert('euirhzeurhzu')
}
</script>
Thank you for helping me and hopefully i explained it good!

$(document).ready(function(){
$('button').click(function(){
$('#pr').attr("src", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZtjprGwxPE5FVcY72h1MWxvVVSiW7RFHmJ6DZ9G1lf0YOr-vV");
if(true){
alert('euirhzeurhzu')
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="rockb">choose rock!</button>
<div id="main">
<img id='pr' style="width: 500px;height: 600px;" src="">
</div>

Load default image when error dynamic image

I need to load a default image in the event that the image is broken. This also needs to apply to dynamic images. Always limited by class.
I found a similar question Jquery on image error not working on dynamic images? but it doesn't seem to work for dynamic images in my case
DEMO https://jsfiddle.net/sb8303aq/1/
$('img.myClass').on("error", function () {
this.src = 'http://placehold.it/150x150&text=PLACEHOLDER';
});
$("button").click(function(){
$('body').append('<img src="http://image_doesn-t_exist_url" class="myClass" />');
});

you can put error function into append function.
$('img.myClass').on("error", function () {
this.src = 'http://placehold.it/150x150&text=PLACEHOLDER';
});
$("button").click(function(){
$('body').append('<img src="http://image_doesn-t_exist_url" class="myClass" />');
$('img').on("error", function () {
this.src = 'http://placehold.it/150x150&text=PLACEHOLDER';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<img src="http://placehold.it/150x150&text=img%20loaded" />
<img src="http://placehold.it/150x150&text=img%20loaded" />
<img src="http://placehold.it/150x150&text=img%20loaded" />
<img src="http://image_doesn-t_exist_url" class='myClass' />
<p>
<button>
Add Image
</button>
</p>

Get .src in Javascript from PHP while

I have a folder with a couple of images. I´m using PHP to get the path of each image to show them in a HTML <table>. Now i´m trying to use the addEventListener to show the image in another div. I begin to show you my PHP:
<table id="imgTable">
<tr>
<?php
$handle = opendir(dirname(realpath(_FILE_)).'../up/to/my/folder');
while($file = readdir($handle)) {
if($file !== '.' && $file !== '..') {
echo '<tr><img src="../up/to/my/folder/' .$file. '" alt="image" class="imgClass"></td>';
}
}
?>
</tr>
</table>
After that i want to use the addEventListener to get the URL from the clicked image and use the src to display the image in another div. Like a photo-gallary.
Thats what I have in JS:
<script type="text/javascript">
document.getElementsByTagName('img').addEventListener("click", function(){
document.getElementById('imgViewer').style.visibility= "visible";
var img = document.getElemensByClassName('imgClass');
for(i=0; i<img.length; i++) {
document.getElementById('bigImg')src = img[i].src;
}
}
</script>
After that, I use to show the image in a with CSS hidden div:
<div id="imgViewer">
<img src="../up/to/my/folder/imgholder.png" id="bigImg">
</div>
I dont want to use onClick. But there comes no reaction with addEventListener and I don´t understand why. It´s my first year in the University and I had just begun to write JavaScript. Maybe there is somebody to help me.

ID should be unique in both HTML4 and HTML5.
http://www.w3.org/TR/html4/struct/global.html
id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
http://www.w3.org/TR/html5/dom.html#the-id-attribute
The id attribute specifies its element's unique identifier (ID). [DOM]
You can modify your PHP and JavaScript code as following
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>OnClick</title>
</head>
<body>
<table id="imgTable">
<tr><?php
$handle = opendir(dirname(realpath(_FILE_)).'../up/to/my/folder');
$imgID = 0;
while($file = readdir($handle)){
if($file !== '.' && $file !== '..'){
echo ' <td><img src="../up/to/my/folder/' .$file. '" alt="image" class="imgClass" id="imageId_'.$imgID.'"></td>\n';
$imgID++;
}
}
?></tr>
</table>
<div id="imgViewer">
<img src="../up/to/my/folder/imgholder.png" id="bigImg">
</div>
<script type="text/javascript">
// create array of all images inside "imgTable"
var imglist = document.getElementById("imgTable").getElementsByTagName("img");
// loop to create onclick event for each image
for(i=0; i<imglist.length; i++) {
document.getElementById(imglist[i].id).addEventListener("click", function(){
document.getElementById('bigImg').src = this.src;
});
}
</script>
</body>
</html>
code is tested and working...
You can run following snippet for demo (I replace images and manually add html code instead of php part)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>OnClick</title>
</head>
<body>
<table id="imgTable">
<tr>
<td><img src="http://i.imgur.com/99ACX4d.jpg" alt="image" class="imgClass" id="imageId_1"></td>
<td><img src="http://i.imgur.com/lXVuaa3.jpg" alt="image" class="imgClass" id="imageId_2"></td>
</tr>
</table>
<div id="imgViewer">
<img src="http://i.imgur.com/QsYVnSd.png" id="bigImg">
</div>
<script type="text/javascript">
// create array of all images inside "imgTable"
var imglist = document.getElementById("imgTable").getElementsByTagName("img");
// loop to create onclick event for each image
for(i=0; i<imglist.length; i++) {
document.getElementById(imglist[i].id).addEventListener("click", function(){
document.getElementById('bigImg').src = this.src;
});
}
</script>
</body>
</html>
Also format your code and use some code editor with autocomplete and debugger. You have many small mistakes (e.g. <tr> instead of <td> in php echo, you forgot dot (.) before src in JS, there is no t in getElementsByClassName).

replace this line
document.getElementById('bigImg')src = img[i].src;
with
document.getElementById('bigImg').src = img[i].src;
you forgot . berfore src
and try this for click event
document.getElementsByTagName('img').addEventListener("click", function() {}
seems like your all images has same id so it will not apply on all images, id have to be unique
you can also do this in jquery for click
$('.imgClass').click(function(){
});

first give a same class name to all images(for example class name is test) and then
write below code
$('.test').on('click',function(){
var src = $(this).attr('src');
// here place your rest of the code
});

How can I pass an image that is uploaded by user to another div, when press a button?

In my code first div is for showing the image. Second div for uploading ani image and third div will show the preview. I want to display the uploaded image in the first div on button press.
<html>
<body>
<div id="imgspace1" class="container">
<!-- image preview div -->
<div id="image_preview1"><img id="previewing1" src="" /></div>
</div>
<!--image upload part-->
<div>
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<input type='file' onchange="readURL(this);" />
</form>
</div>
<div id="image_edit" class="container">
<img id="image_preview" src="#" alt="Upload Image"/> </div>
<div>
<input id="confirm_button" type="button" value="Confirmn" onclick="('')"/>
</div>
</body>
</html>

If your prime concern is displaying a preview of the image you may use EZDZ
js library.Then you just have to add an image tag and import the .js and .css files and you will be able to see the preview and then upload it by ajax.

function readURL(input) {
if ( input.files && input.files[0] ) {
var FR= new FileReader();
FR.onload = function(e) {
$('#previewing1').attr( "src", e.target.result );
};
FR.readAsDataURL( input.files[0] );
}
}
This code will read the uploaded image in file element.

<script type="text/javascript">
$(document).ready(function(){
$("#confirm_button").click(function{
var preview = $('#image_preview').attr('src');
$("#previewing1").attr("src", preview);
});
});
</script>
You can copy the src of third div image to first div image. And confirm button will be . You can write this unction in javascript also with onclick event.

Onclick Remove/delete image

I need to load an .swf file after we click on an image
The .swf file loads successfully after we click on the image,but it loads the .swf below the image.I need to replace the img with .swf(in short,hide the img).
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
function loadSWF(url){
swfobject.embedSWF(url, "flashcontent", "550", "400", "9");
}
document.getElementById('iii').style.display = 'none';
</script>
<p><a href="http://www.leconcombre.com/stock/coccyminimini1.swf" onclick="loadSWF(this.href); return false;">
<div id="iii" class="iii">
<img id="my_image17" border="0" src="http://4.bp.blogspot.com/-7Ij8T9BvULw/VJWltsHNmhI/AAAAAAAANDI/a76wpzm_a-E/s1600/world%2Bmap%2Bcolor_1.jpg" />
</div>
</a></p>
<div id="flashcontent"></div>
I need to hide/remove the class/id "iii" (within which the img tag lies).However the code doesn't seem to work only with respect to hiding/removing of img. Any tips?

I think this is what you're looking for.
I made a js fiddle for you.
http://jsfiddle.net/q7a96h14/1/
html
<div id="iii" class="iii">
<img id="my_image17" border="0" src="http://4.bp.blogspot.com/-7Ij8T9BvULw/VJWltsHNmhI/AAAAAAAANDI/a76wpzm_a-E/s1600/world%2Bmap%2Bcolor_1.jpg" />
</div>
js
$(function(){
var $img = $("#my_image17")
, $container = $("#iii");
$img.on("click", function() {
$img.remove();
$container.html("<embed src='http://www.leconcombre.com/stock/coccyminimini1.swf' width='550' height='400'/>");
$container.removeClass().removeAttr("id");
});
});

Looks like ...
function loadSWF(url){
swfobject.embedSWF(url, "flashcontent", "550", "400", "9");
document.getElementById('iii').style.display = 'none';
}
... the hide should occur when the load does.