I have multiple same images. When i click on one of them img need to be replaced. I have JS script:
var newsrc = "slide_down";
function changeImage() {
if ( newsrc == "slide_down" ) {
document.images["pic"].src = "img/slide_up.png";
document.images["pic"].alt = "slide_up";
newsrc = "slide_up";
}
else {
document.images["pic"].src = "img/arrow.png";
document.images["pic"].alt = "slide_down";
newsrc = "slide_down";
}
}
But when I press the second img, always the first to be replaced. Help please.
Html code of image is <img src="img/arrow.png" alt="slide_up" class="head" id="pic" onclick="changeImage()">
Try
var newsrc = "slide_down";
function changeImage() {
if ( newsrc == "slide_down" ) {
this.src = "img/slide_up.png";
this.alt = "slide_up";
newsrc = "slide_up";
}
else {
this.src = "img/arrow.png";
this.alt = "slide_down";
newsrc = "slide_down";
}
}
Related
I want a back and forth changing image button with an ID tag just so my html5 can identify where the JavaScript should be redirected.
I need something of this sort.
function changeImage() { if
(document.getElementById
("imgClickAndChange").src == "
storage/emulated/0/
Documents/Mp3Player/html/
images/Pause.jpg") {
document.getElementById
("imgClickAndChange").src = "/
storage/emulated/0/
Documents/Mp3Player/html/
images/play.jpg "; } else {
document.getElementById
("imgClickAndChange").src = "
storage/emulated/0/
Documents/Mp3Player/html/
images/Pause.jpg "; } }
But it needs to be able to change an image back and forth like this.
var newsrc = "Play.jpg";
function changeImage() {
if ( newsrc == "Play.jpg" ) {
document.images["pic"].src = "/
storage/emulated/0/
Documents/Mp3Player/html5/
images/Pause.jpg";
document.images["pic"].alt =
"Play";
newsrc = "Pause.jpg";
}
else {
document.images["pic"].src = "/
storage/emulated/0/
Documents/Mp3Player/html5/
images/Play.jpg";
document.images["pic"].alt =
"Pause";
newsrc = "Play.jpg";
}
}
Not sure if this is what you are looking for:
var element = document.getElementById("imgClickAndChange")
var playPath = getPath('Play')
var pausePath = getPath('Pause')
function toggleImage() {
if (element.src === playPath) element.src = pausePath
else element.src = playPath
}
function getPath(type) {
return '/storage/emulated/0/Documents/Mp3Player/html5/images/' + type + '.jpg'
}
My code has three functions. I want one button to run function one when pressed the first time then function 2 when pressed the second time function 3 when pressed the third time and then for it to reset.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<script>
var red = "https://s23.postimg.org/bo5a8hzsr/red_jpg.png"
var yellow = "https://s24.postimg.org/dodxgn305/yellow.png"
var green = "https://s29.postimg.org/5ljr1ha3r/green.png"
var lights =[red,yellow,green]
function changered()
{
var img = document.getElementById("light");
img.src= lights[0];
return false;
}
function changeyellow()
{
var img = document.getElementById("light");
img.src= lights[1];
return false;
}
function changegreen()
{
var img = document.getElementById("light");
img.src= lights[2];
return false;
}
</script>
</head>
<body>
<button id="sequence" onclick="changeyellow" onclick="changered" onclick="changegreen">sequence</button>
<br><br><br>
<img id="light" src="https://s29.postimg.org/5ljr1ha3r/green.png" />
</body>
</html>
You can use only one function and a global variable that contains the current color like this :
<!DOCTYPE html>
<html>
<head>
<script>
var red = "https://s23.postimg.org/bo5a8hzsr/red_jpg.png"
var yellow = "https://s24.postimg.org/dodxgn305/yellow.png"
var green = "https://s29.postimg.org/5ljr1ha3r/green.png"
var lights =[red,yellow,green];
var currentColor = 0;
function changeColor() {
var img = document.getElementById("light");
img.src= lights[currentColor];
if (currentColor === (lights.length - 1)) {
currentColor = 0;
} else {
currentColor++;
}
return false;
}
</script>
</head>
<body>
<button id="sequence" onclick="changeColor();">sequence</button>
<br><br><br>
<img id="light" src="https://s29.postimg.org/5ljr1ha3r/green.png" />
</body>
</html>
There are several ways you could handle it, but here's an easy one:
above:
function changered()
add this:
var cur_button = 1
Then change your button to this:
<button id="sequence" onclick="handle_click()">sequence</button>
and add this function:
function handle_click()
{
if(cur_button == 1)
{
cur_button = 2
changered()
}
else if(cur_button == 2)
{
cur_button = 3
changeyellow()
}
else if(cur_button == 3)
{
cur_button = 1
changegreen()
}
}
There you go
<input type="button" name="btnn" onclick="runFunction()" />
<script>
var red = "https://s23.postimg.org/bo5a8hzsr/red_jpg.png";
var yellow = "https://s24.postimg.org/dodxgn305/yellow.png";
var green = "https://s29.postimg.org/5ljr1ha3r/green.png";
var lights =[red,yellow,green];
var a =1;
function changered()
{
var img = document.getElementById("light");
img.src= lights[0];
return false;
}
function changeyellow()
{
var img = document.getElementById("light");
img.src= lights[1];
return false;
}
function changegreen()
{
var img = document.getElementById("light");
img.src= lights[2];
return false;
}
function runFunction()
{
if(a==1)
{
changered();
a++;
}
if(a==2)
{
changeyellow();
a++;
}
if(a==3)
{
changegreen();
a=1;
}
}
I can use the switch statement, and simply reference the lights array to determine which to display next. Seems pretty painless.
var red = "https://snowmonkey.000webhostapp.com/images/red.png"
var yellow = "https://snowmonkey.000webhostapp.com/images/yellow.png"
var green = "https://snowmonkey.000webhostapp.com/images/green.png"
var lights =[red,yellow,green]
handleClick = function(){
var light = document.getElementById("light");
switch (light.src) {
case lights[0]:
light.src = lights[1];
break;
case lights[1]:
light.src = lights[2];
break;
case lights[2]:
light.src = lights[0];
break;
}
}
#light {
float: right;
width: 50px;
}
<button id="sequence" onclick="handleClick();">sequence</button>
<br><br><br>
<img id="light" src="https://snowmonkey.000webhostapp.com/images/green.png" />
https://jsfiddle.net/x1rqwzvy/1/
You shouldn't add more than one onclick in your html code. If you do the handlers will activate simultaneously. This means you have to handle the change with JavaScript.
To determine the light you would simply increment a value in the following example:
function lightChange() {
lightChange.incrementer = lightChange.incrementer || 1;
switch (lightChange.incrementer) {
case 1:
changered();
break;
case 2:
changeyellow();
break;
case 3:
changegreen();
lightChange.incrementer = 0;
break;
}
lightChange.incrementer++;
function changered() {
var img = document.getElementById("light");
img.src = lights[0];
return false;
}
function changeyellow() {
var img = document.getElementById("light");
img.src = lights[1];
return false;
}
function changegreen() {
var img = document.getElementById("light");
img.src = lights[2];
return false;
}
}
then just change the onclick handler to lightChange instead of trying to add three consecutive handlers.
<button id="sequence" onclick="lightChange()">sequence</button>
how about
var counter = 0;
function changeColor(){
counter++;
var img = document.getElementById("light");
img.src= lights[counter % 3];
return false;
}
and your html should be:
<button id="sequence" onclick="changeColor()">sequence</button>
You can create a function array and then remove entries from it once done.
var functionArray = [changered,changeyellow,changegreen]
function sequenceClick(){
functionArray[0]();
functionArray.shift();
}
Complete Code:
var red = "https://s23.postimg.org/bo5a8hzsr/red_jpg.png"
var yellow = "https://s24.postimg.org/dodxgn305/yellow.png"
var green = "https://s29.postimg.org/5ljr1ha3r/green.png"
var lights =[red,yellow,green]
function changered()
{
var img = document.getElementById("light");
img.src= lights[0];
return false;
}
function changeyellow()
{
var img = document.getElementById("light");
img.src= lights[1];
return false;
}
function changegreen()
{
var img = document.getElementById("light");
img.src= lights[2];
return false;
}
var functionArray = [changered,changeyellow,changegreen]
function sequenceClick(){
functionArray[0]();
functionArray.shift();
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="sequence" onclick="sequenceClick()">sequence</button>
<br><br><br>
<img id="light" src="https://s29.postimg.org/5ljr1ha3r/green.png" />
</body>
</html>
var firstMove = 0;
var pictures = ['boar.jpg','lion.jpg','bones.jpg','eagle.jpg','wolf.jpg','boar.jpg','lion.jpg','bones.jpg','eagle.jpg','wolf.jpg','boar.jpg','lion.jpg','bones.jpg','eagle.jpg','wolf.jpg']
pictures.sort()
function replyClick(clicked_id)
{
//if player already draw one card;
if (firstMove){
var image = document.getElementById(clicked_id);
image.innerHTML = '<img src='+pictures[clicked_id-1]+' />'
var firstPicture = document.getElementById(firstMove);
if (image.innerHTML == firstPicture.innerHTML){
firstMove=0;
}
else {
image.innerHTML = "";
firstPicture.innerHTML = "";
firstMove=0
}
}
// if player didnt draw any card;
else {
var image = document.getElementById(clicked_id);
image.innerHTML = '<img src='+pictures[clicked_id-1]+' />'
firstMove = clicked_id
}
}
<div class="card" id="1" onclick="replyClick(this.id)"></div>
<div class="card" id="2" onclick="replyClick(this.id)"></div>
I try to create simple pexeso game.where you looking for two identical images.
My question is how to change this code to show that certain image right after somebody click on it.Because my script show image after inner condition but that is too late for me.Thanks for answer
Compare array elements.
pictures[clicked_id-1] == pictures[firstMove-1]
is the same that
image.innerHTML == firstPicture.innerHTML
UPD
For small delay use setTimeout
// other code
function replyClick(clicked_id) {
if (firstMove){
var imageSrc = pictures[clicked_id-1];
var prevImageSrc = pictures[firstMove-1];
var image = document.getElementById(clicked_id);
image.innerHTML = '<img src='+imageSrc+' />'
var firstPicture = document.getElementById(firstMove);
if (imageSrc == prevImageSrc) {
firstMove=0;
} else {
// code will run after 1s delay
setTimeout(function () {
image.innerHTML = "";
firstPicture.innerHTML = "";
firstMove=0;
}, 1000); // delay = 1 second
}
} else {
var image = document.getElementById(clicked_id);
image.innerHTML = '<img src='+pictures[clicked_id-1]+' />'
firstMove = clicked_id
}
}
I have a problem with a function that's should change the image when I click on the button it pass directly from the first image to the last image. What is wrong in my code ?
<script language="javascript">
function changeImage() {
if (document.getElementById("image").src == "1.jpg")
{
document.getElementById("image").src = "2.jpg";
}
else if (document.getElementById("image").src == "2.jpg")
{
document.getElementById("image").src = "3.jpg";
}
}
</script>
Accessing DOMNode.src will return the full path to the image:
var img = document.createElement('img');
img.src = 'a.png';
console.log(img.src); // https://example.com/a.png
console.log(img.getAttribute('src')) // a.png
Your changeImage function can be rewritten as:
function changeImage() {
var image = document.getElementById("image");
var src = image.getAttribute('src');
if (src == "1.jpg") {
image.src = "2.jpg";
}
else if (src == "2.jpg") {
image.src = "3.jpg";
}
}
Maybe you should use something like this:
function changeImage() {
var image = document.getElementById("image");
var src = image.getAttribute("src");
if (src === "1.jpg") {
image.src = "2.jpg";
} else if (src === "2.jpg") {
image.src = "3.jpg";
}
}
Give me a shout if it works.
<html>
<head>
<script language="javascript">
function changeImage() {
if (document.getElementById("image").src == "1.jpg")
{
document.getElementById("image").src = "2.jpg";
}
else (document.getElementById("image").src == "2.jpg")
{
document.getElementById("image").src = "3.jpg";
}
}
</script>
</head>
<body>
<img id="image" src="1.jpg" ><br><br></img>
<button id="clickme" onclick="changeImage();"> : pass </button>
</body>
</html>
I'm trying to connect previous and fwd buttons to a gallery and I want the previous button to be hidden on first image of the gallery but javascript doesn't seem to be working at all.
Javascript
var imageGallery = new Array();
imageGallery[0] = '1.png';
imageGallery[1] = '2.png';
imageGallery[2] = '3.png';
imageGallery[3] = '4.png';
imageGallery[4] = '5.png';
var imgCount = 0;
function next() {
imgCount++ ;
document.getElementById("gallery").src = imageGallery[imgCount] ;
}
function previous() {
imgCount--;
document.getElementById("gallery").src = imageGallery[imgCount] ;
}
if(document.getElementById("gallery").getAttribute("src") == "1.png")
{
document.getElementById("previous").style.visibility = 'hidden';
}
else
{
document.getElementById("previous").style.visibility = 'visible';
}
HTML
<div id="img">
<img id="gallery" src="1.png" style="height:420px; width:744px" >
<div id="imgNav">
<a id="previous" href onclick="previous(); return false;">previous</a>
<span style="color:#666; font-size:0.9em"> | </Span>
<a id="next" href onclick="next(); return false;">next</a>
</div>
</div>
Actually the logic is if 'src' attribute of id 'gallery' is '1.png' then 'visibility' of element with id 'previous' is 'hidden' else not but doesn't seem to be working. Can anyone help figuring it out.
You're probably trying to check on an image that's not totally loaded yet. Did you remember to place your code to run just when the page is fully loaded (in case it's placed in the page headers - you didn't mention whether it is or not)?
UPDATED
var imageGallery = new Array();
imageGallery[0] = '1.png';
imageGallery[1] = '2.png';
imageGallery[2] = '3.png';
imageGallery[3] = '4.png';
imageGallery[4] = '5.png';
var imgCount = 0;
function checkNav() {
var previousLnk = document.getElementById("previous");
var nextLnk = document.getElementById("next");
previousLnk.style.visibility = imgCount == 0 ? 'hidden' : 'visible';
nextLnk.style.visibility = imgCount >= (imageGallery.length - 1) ? 'hidden' : 'visible';
}
function setImg() {
var gallery = document.getElementById("gallery");
gallery.src = imageGallery[imgCount];
}
function next() {
imgCount++;
setImg();
checkNav();
}
function previous() {
imgCount--;
setImg();
checkNav();
}
window.onload = function () {
checkNav();
}
Demo: http://jsfiddle.net/N7V9E/