We Keep Coding

How i show image src on click

Write a function that will be called upon pressing the right button of one of the images you have on the site.
The function calls up a confirm () window in which you ask the user if he wants to know the source of the image
If the user clicks OK alert (this.src), which shows the content of the src attribute of that image
If the user clicks on cancel, disable the context menu that appears at
pressing the right button
this is my wrong code
<img src="opera1.png" id="immagine1" alt="immagine1" width="500" height="333" oncontextmenu="destra()">
<img src="ioaparatissima.JPG" id="immagine2" alt="immagine2" width="500" height="333" oncontextmenu="destra()">
javascript
function destra(){
var r = confirm("Vuoi conoscere la src dell'immagine");
if(r == true) {
alert(y.src);
} else {
}
}

Since you are using inline event bindings I would suggest two changes.
oncontextmenu="destra(this)"
Pass in the element that the inline event binding is on.
function destra(y){
var r = confirm("Vuoi conoscere la src dell'immagine");
if(r == true) {
alert(y.src);
} else {
}
}
Accept the element as a method argument.

By rereading your statement it seems to me that this answer corresponds better ... (?)
document.querySelectorAll('img').forEach(el=> el.addEventListener('contextmenu',destra) )
function destra(e)
{
e.preventDefault() // disable real context Menu
if ( confirm("Vuoi conoscere la src dell'immagine") )
{
alert( this.src )
}
}
<img src="https://picsum.photos/150" alt="immagine1" >
<img src="https://picsum.photos/100" alt="immagine2" >

Use the getElementById(), like in this example:
function destra() {
let r = confirm("Vuoi conoscere la src dell'immagine?");
let y = document.getElementById("immagine1");
if (r == true) {
alert(y.src);
}
}

try like this... I hope this one usefull...
<img src="opera1.png" id="img1" alt="immagine1" width="500" height="333">
<button onclick="getimgId(1)">copy link</button>
<br/>
<img src="ioaparatissima.JPG" id="img2" alt="immagine2" width="500" height="333">
<button onclick="getimgId(2)">copy link</button>
<script type="text/javascript">
function getimgId(img_id){
var res = confirm("Vuoi conoscere la src dell'immagine");
if(res == true) {
var img_id = img_id;
var img_url = document.getElementById('img'+img_id).src;
alert(img_url);
} else {
}
}
</script>
now you want to just give unique id to images and there right side buttons of images...
like img1, img2, img3 for images and onclick="getimg(1)", getimg(2), getimg(3)...
you can easily assign unique ids using Javascript. just apply loop and inside the loops add imgs with unique ids...
for assign unique I share example below...below code is just for Your Reference. do changes as per your needs. you can search on google for more examples.
for(var i=0;i<yourRecordArray.length;i++){
newList = document.createElement('li');
newList.className = 'list-border';
newList.id = 'imgdiv'+i;
newList.innerHTML = '<img src="" id="img'+i+'">+
'<button onclick="">';
document.getElementById('add').appendChild(newList);

i solved like this
function destra(y) {
window.addEventListener("contextmenu", function(e){e.preventDefault();}, false);
var r = confirm("do you want to know the src of the image?");
if(r == true) {
alert(y.src);
} else {
}
}
<img src="https://picsum.photos/150" alt="immagine1"id="immagine1" alt="immagine1" width="150" height="150" oncontextmenu="destra(this)">
<img src="https://picsum.photos/150" alt="immagine2" id="immagine2" alt="immagine2" width="150" height="150" oncontextmenu="destra(this)">

Changing background images with JavaScript

I'm fairly new to JavaScript and HTML and I can't seem to figure out want is wrong. This is part of an assignment I have for class so the structure/code is formatted the same way as an example the professor provided.
I'm trying to rotate between different background images.
This is what I have for the script:
var bakground = [];
background[0] = new Image();
background[0].src = "Images/blue.jpg";
background[1] = new Image();
background[1].src = "Images/chalkboard_web.jpg";
background[2] = new Image();
background[2].src = "Images/computer-scince-education.jpg";
background[3] = new Image();
background[3].src = "Images/universidad.jpg";
var i = 0;
var temp = new Image();
function wallpaper()
{
temp = background[i].src;
i++;
if(i == background.length)
i = 0;
document.body.background = 'temp';
return false;
}
This is where I'm calling the function:
<P/> <b> test changing document body background:</b>
<INPUT TYPE="button" NAME="button2" value="set background to an image"
onClick="wallpaper()" >
</P>

You are not using the "temp" variable you defined above but a string instead!
function wallpaper()
{
temp = background[i].src;
i++;
if(i == background.length)
i = 0;
document.body.background = temp;
return false;
}
Should work

There are several things.
Bugs:
type in background
you are setting document.body.background to the string 'temp' and not to your image.
you are using a closing p-tag to open the paragraph. Should be <p> instead of </P>
Other improvements:
you don't even need to create new Image(), the string of where to get the image should suffice.
you don't need to have temp as a global variable.
you can more easily modulo the iterator rather then re-setting it to 0
tags and attributes are case insensitive. It's common to use lowercase, though.
elements like input can / should have closing tags or be self-closing.
See example here:
<html>
<head>
<script>
var background = [
"https://source.unsplash.com/random",
"Images/wall.jpg",
"Images/1road.jpg"
];
var i = 0;
function wallpaper() {
document.body.background = background[i++];
i = i % background.length; // will wrap around the length. look up 'modulo' unsure
return false;
}
</script>
</head>
<body>
<p/>
<b> test changing document body background:</b>
<input type="button" name="button2" value="set background to an image"
onClick="wallpaper()" />
</p>
</body>
</html>

How to change source of image on click to one source and back to different source on same click

When the button is clicked the source of the image must be changed to something and when it is clicked again the source should be changed back to the previous one. Kind of like an animation of sort except that i control it with a button
the code which i have tried and failed is:
DOCTYPE html>
<html>
<body>
<img id="myImage" src="a.png" alt="a" border="0">
<button type ="button" onclick="change()">Click Me</button>
</body>
<script>
var x = document.getElementById("myImage")
function change(){
if x.src="a.png"
document.getElementById("myImage").src = "b.png"
else x.src="a.png"
}
</script>
</html>
What should i change in my code or is there a simpler code

Try this:
var x = document.getElementById("myImage")
function change(){
if (x.src == "a.png")
x.src = "b.png"
else
x.src = "a.png"
}
</script>
Can also do instead of if statement:
x.src = (x.src == "a.png" ? "b.png" : "a.png");

I think this is what you are locking at:
It took me so long to find the pictures, sorry ㅋㅋㅋ
var imgA = 'http://i.imgur.com/v5o8MW8.jpg'
var imgB = 'http://i.imgur.com/v1Vb6RR.jpg'
var x = document.getElementById("myImage")
function change() {
x.src = (x.src == imgA ? imgB : imgA);
}
<body>
<button type="button" onclick="change()">Click Me</button></br>
<img id="myImage" src="http://i.imgur.com/v5o8MW8.jpg" alt="a" border="0">
</body>

You forgot about ():
function change(){
if (x.src="a.png")
document.getElementById("myImage").src = "b.png"
else x.src="a.png"
}
MOAR: https://www.w3schools.com/js/js_if_else.asp

If you are trying to toggle the image you can just use a global variable as below:
var x = 1;
function change(){
if (x == 1)
{
document.getElementById("myImage").src = "../Images/arrow.png";
x = 0;
}
else
{
document.getElementById("myImage").src="../Images/Add.png";
x = 1;
}
}

Harikrishnan's way is one way of doing it. Another way would be by use of custom data-* attributes.
So your HTML would become:
<img id="myImage" data-change="b.png" src="a.png" alt="a" border="0">
And your Javascript would be:
function change(){
var new_src = x.getAttribute('data-change'); // get the new source
x.setAttribute("data-change", x.src); // set the custom attribute to current source
x.src = new_src; // set the image source to new source
}
UPDATE
Just realized you had syntax error and a typo in your solution.
if x.src="a.png"
document.getElementById("myImage").src = "b.png"
else x.src="a.png"
should become
if(x.src == "a.png")
x.src = "b.png"
else
x.src="a.png"
You were missing () in your if statement and also using a single = which will assign a value and not compare values.

JS: How to change the image reference ending value

Instead of having a ton of if statements, I would like the method to display the correlated image by name, fx. clicking BlackPicture4.gif will turn it into WhitePicture4.gif. The number of the picture is passed on to the method.
I'm new to javascript, so maybe indexes[] don't work as I thought they do.
I have an array of Whitepicures:
imgArray[1] = new Image();
imgArray[1].src = "WhitePicture1.gif";
...
function changePicture(int)
{
var image = document.getElementById('Img' + int); //works
image.src = imgArray[int] //doesn't work
var thefile = "imgArray" + int + ".gif" //also doesn't work
image.src = thefile;
}
I tried so many different ways, but could use help
html: //as requested, but that works fine
<img id="Img1" onclick="changePicture(1)" src="Blackpicture1.gif" width="50" height="50" >
<img id="Img2" onclick="changePicture(2)" src="Blackpicture2.gif" width="50" height="50" >
...
Edit: The problem is solved by adding .src to "= imgArray[int]"
Another thing I didn't think of was I had to assign the array elements INSIDE a function, rather than just on top of the file where I believe only declarations can be made.

This may work im not sure
imgArray[1] = new Image();
imgArray[1].src = "WhitePicture1.gif";
var x;
function changePicture(x) {
var image = document.getElementById('Img' + x);
image.src = imgArray[x].src;
}

I think what you're trying to do might be
function changePicture(int){
document.getElementById('Img'+int+'').setAttribute('src',imageArray[int].src);
}

In this example, the pic with id='1' will be converted into a pic with id='2':
$("img").click(function() {
var x = $(this).attr("id");
x++;
var y = $("#" + x).attr("src");
$(this).html("");
$(this).html("<img src='" + y "'>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="pic1.jpg" id="1">
<img src="pictobereplaced.jpg" id="2">

Javascript move picture to the right where the first goes to the back comes to the front with the click of a button

I am trying to create a JavaScript code that has 3 images up when a button is pushed it looks like they are all moving right. So far I am super lose on the JavaScript part of the code. I can't get it to move, or the button to work.
HTML:
<head>
<script src="switchright.js"> </script>
<body>
<h1 style="text-align:center">Image Switcher</h1>
<center>
<img src="../images/smile.png" id=smile>
<img src="../images/plain.png" id=plain>
<img src="../images/wink.png" id=wink>
<br>
<button type="button" id=theButton>Switch Right</button>
</center>
</body>
</head>
Javascript:
theButton.onclick = function pictureChange(){
document.getElementById('smile').src="../images/wink.png";
}
theButton.onclick = function pictureChange(){
document.getElementById('plain').src="../images/smile.png";
}
theButton.onclick = function pictureChange(){
document.getElementById('wink').src="../images/smile.png";
}

As I understood - you have 3 images in a row and you want to change their sources circularly by clicking the button.
Hope this helps ( by the way - I think you should embrace the value of id attribute in double quotes )
// this will iterate from 0 to 2 and represents
// the current position of wink
var position = 0;
// save the links to files in an array
var images = ["../images/wink.png", "../images/smile.png", "../images/smile.png"];
// document.getElementById() are expensive in time
// so better to save the references to the objects
// and not find them every click
var smile = document.getElementById('smile');
var plain = document.getElementById('plain');
var wink = document.getElementById('wink');
theButton.onclick = function() {
// here you now depend on the position values that
smile.src = images[position % 3];
plain.src = images[(position + 1) % 3];
wink.src = images[(position + 2) % 3];
// increments the position variable and checks
// that it deosn't become beggier that 2
position++;
if (position > 2) {
position = 0;
}
}
Please mind that you can change the sources in the images array ( if there would be some issues with that ).

Switch the sources in just one function like this:
window.slide = function(){
var store = document.getElementById('wink').src;
document.getElementById('wink').src = document.getElementById('plain').src;
document.getElementById('plain').src = document.getElementById('smile').src;
document.getElementById('smile').src = store;
}
.small {
width: 25px;
height: 25px;
}
<h1 style="text-align:center">Image Switcher</h1>
<center>
<img class="small" src="http://www.costarricense.cr/pagina/radiogigante/index_files/image007.gif" id="smile">
<img class="small" src="http://www.skip-hop.co.uk/images/skip-hop-number-2.gif" id="plain">
<img class="small" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/L3lo.gif" id="wink">
<br>
<button type="button" onclick="slide()">Switch Right</button>
</center>