I'm trying to make Previous and Next buttons cycle through src's and onclick's with already-visible images and of course, change others.
I'm doing this in JavaScript/HTML/CSS only, I don't know JQuery..
HTML fields:
<img id="prev" onclick="prev1()" src="Template.gif" width="64" height="64">
<img id="center" onclick="center1()" src="middlePictureOne.gif" width="128" height="128">
<img id="next" onclick="next1()" src="next.gif" width="64" height="64">
Previous Button script:
function prev1() {
document.getElementById("center").src="middlePictureOne.gif";
document.getElementById("center").onclick="center1()";
document.getElementById("next").onclick="next1()";
document.getElementById("prev").src="Template.gif";
}
Next Button:
function next1() {
if (condition == "true") {
document.getElementById("center").src="middlePictureTwo.gif";
document.getElementById("center").onclick="center2()";
document.getElementById("next").onclick="next2()";
document.getElementById("prev").onclick="prev1()";
document.getElementById("prev").src="previous.gif";
}else{
alert("Nope.");
}}
Condition: works, Next: works, Previous: having all the problems.
I've tried everything I know how to do to fix it.. just hoping the answer isn't so obvious..
Condition and how it's come to be:
var condition = new Boolean(0);
function center1() {
if (m1hp>0) {
m1hp -= (heroDamage - m1def);
} else {
onFinish();
}
document.getElementById("hpc").innerHTML=m1hp;
}
function onFinish() {
m1hp = 50;
condition = "true";
}
Lots of irrelevant info there, but I didn't want to leave anything out in case it matters..
http://jsfiddle.net/SusuReedJango/P7KNh/
THere's the fiddle completely unedited of everything I have written.. I'm stumped and cutting out the unused parts, it wouldn't work. Probably need to replace the images if you're that motivated to solve my problem.
Related
I am currently trying to figure out how to check an image source in an if statement, which would then disable a button, but I can't seem to figure out how to make the program correctly tell what the source is.
This is what I have so far:
function sick() {
if (document.getElementById("relaxed").src == "Sick.jpg") {
document.getElementById("play").disabled = true;
}
}
HTML:
<img src="Rel.jpg" alt="rel" id="relaxed">
<button onclick="sick()" id="feed">Feed</button>
<button onclick="play()" id="play">Play</button>
I have an image that changes its src onclick. This functionality works fine, but I need to change the img title attribute as well. My code changes the title but only keeps the change while hovering my mouse over the img.
When I onmouseout of the img, FF Developer shows the title reverting to empty, ultimately not saving the new img title. Thought it was a browser issue but other browsers do the same.
Ideas?
<script type="text/javascript">
function my_func() {
if (document.getElementById("changeable").src == "mysrc") {
document.getElementById("changeable").src = "newsrc";
document.getElementById("changeable").setAttribute("title","Now showing newimg");
}
else {
document.getElementById("changeable").src = "newimg";
document.getElementById("changeable").setAttribute("title","Now showing defaultimg");
}
}
</script>
<img id="changeable" onclick="my_func();" src="mysrc" title="Click to toggle" />
You checked condition wrong,
Here,
document.getElementById("changeable").src result should be "file:///home/system/Desktop/mysrc"
use like,
<html><script type="text/javascript">
function my_func() {
if (document.getElementById("changeable").getAttribute('src') == "mysrc") {
document.getElementById("changeable").setAttribute('src',"newsrc");
document.getElementById("changeable").setAttribute("title","Now showing newimg");
}
else {
document.getElementById("changeable").src = "newimg";
document.getElementById("changeable").setAttribute("title","Now showing defaultimg");
}
}
</script>
<img id="changeable" onclick="my_func();" src="mysrc" title="Click to toggle" />
</html>
I'm using a button onclick and Image array to show a 1 image, and then a third image. I want to have several images do this next to each other. The code works fine with one..But when I try to add another it goofs up. I'm very new to Javascript so do not know what the problem is.
<button onclick="Suit()" class="button">
<img id="IMG1" src="suit.png" class="suit" width="300" height="260">
</button>
<script>
img_array= new Array('suit.png','suitwrong.png','suittry.png');
i=0;
function Suit()
{
i++;
document.getElementById("IMG1").src=img_array[i];
if(i==img_array.length-1) {
i=-1;
}
}
</script>
I basically want to have x3 of this code (3 image click arrays). Happy to put it in a seperate .js file if that helps.
is this really the script? if it is so try changing something like put var everytime you declare a js variable. and practice more math and logic in arrays and loops.
btw try this
<button onclick="Suit()" class="button">
<img id="IMG1" src="suit.png" class="suit" width="300" height="260">
</button>
<script>
img_array= new Array('suit.png','suitwrong.png','suittry.png');
i=0;
function Suit()
{
i++;
document.getElementById("IMG1").src=img_array[i];
if(i==img_array.length) {
i=i-img_array.length;
}
}
</script>
now try to add another picture in your array
im trying to make a switch wich will change two images. I once solved ths, but then i lost some important files, the one containing the final script being one.
The idea is that when the button is clicked, it will change image 1 for image 2 and will change its own image from on to off. Then, when clicked again it will change image 2 for image 1 and its own image from off to on.
I been trying something like this, buts not working, not sure why. I think i got the wrong declaration for the if which determines if the switch is on or off, but again not sure.
Before you read the code and realize its poorly done, consider i dont know a thing about javascript, i only have a vague idea of how it works.
<script type="text/javascript">
var vswitch = false;
if (document.getElementById("switchh").src = "http://www.sampleweb.com/on.gif") {
vswitch = true
}
else {
vswitch = false
}
function change(){
if (vswitch == true){
function changelamp() {
document.getElementById("lamp").src = "http://www.sampleweb.com/image2.png";
}
function changeSwitch() {
document.getElementById("switchh").src = "http://www.sampleweb.com/off.gif";
}
} else {
function changelamp() {
document.getElementById("lamp").src = "http://www.sampleweb.com/image1.gif";
}
function changeSwitch() {
document.getElementById("switchh").src = "http://www.sampleweb.com/on.gif";
}
}
}
<div id="main_img">
<img id="lamp" src = "http://www.sampleweb.com/image1.gif">
</div>
<div id="container">
<img id="switchh" src = "http://www.sampleweb.com/on.gif" onclick='change();'>
</div>
</script>
Thank you
/////////////////////EDIT///////////////////////////
Thanks a lot.
Having those two functions there was a result of the previous code, i dont understand how i didnt realize it until you pointed out, heh. (Sleepyness maybe?)
#renuka, that code worked perfectly. I only changed the calling div, from the div "toggle" you created to the div "container" since the button has to switch the images itself, but other than that was sweet. Thanks.
Thanks for the help!
There are a couple of problems here :)
First:
if (document.getElementById("switchh").src = "http://www.sampleweb.com/on.gif")
^ this assigns a variable
You want to change = to === so that a comparison is done
Second, you're creating functions changelamp and changeSwitch but you're never actually calling them. I think you want to get rid of the function declarations completely:
if (vswitch == true){
document.getElementById("lamp").src = "http://www.sampleweb.com/image2.png";
document.getElementById("switchh").src = "http://www.sampleweb.com/off.gif";
} else {
document.getElementById("lamp").src = "http://www.sampleweb.com/image1.gif";
document.getElementById("switchh").src = "http://www.sampleweb.com/on.gif";
}
Finally, there are some minor syntax errors such as missing semi-colons
vswitch = true; // <- like this
Please check the updated code below:
<script type="text/javascript">
function change(){
var vswitch = false;
if (document.getElementById("switchh").src == "http://www.sampleweb.com/on.gif") {
vswitch = true
}
else {
vswitch = false
}
if (vswitch == true){
document.getElementById("lamp").src = "http://www.sampleweb.com/image2.png";
document.getElementById("switchh").src = "http://www.sampleweb.com/off.gif";
}
else {
document.getElementById("lamp").src = "http://www.sampleweb.com/image1.gif";
document.getElementById("switchh").src = "http://www.sampleweb.com/on.gif";
}
}
</script>
<div id="main_img">
<img id="lamp" src = "http://www.sampleweb.com/image1.gif"/>
</div>
<div id="container">
<img id="switchh" src = "http://www.sampleweb.com/on.gif"/>
</div>
<div id="toggle">
<input type="button" value="On/Off" onclick='change();'/>
</div>
The '=' assigns the value to the "src" of the image. Replace it with '==' for comparison.
Additionally from what jasonscript says, you are never switching the vswitch variable to the opposite state, so you'd need to add
vswitch = !vswitch;
after the if in the change() function, that way, the next time you click in the switch, it takes the "other" path through the if
Another point is that if you have the code layout as you have it in your post (script first and then the HTML code) the first if will actually not find the #switchh img, so you need to either move the if inside the change() function or move your script after the HTML
Major problem is that you are unnecessarily creating functions inside script which are never called.
No need for
changelamp() and changeSwitch()
You can directly post the code after the if condition check.
<script> tags should be closed. = assigns and === does comparison, and you need to change the value of vswitch.
Here is a fiddle that accomplishes what you're after with some random images
First, some visualization of the code.
I have the following images that are dynamically generated from jquery. They're made upon user request:
<img id="i13133" src="someimage.jpg" />
<img id="i13232" src="someimage1.jpg" />
<img id="i14432" src="someimage2.jpg" />
<img id="i16432" src="someimage3.jpg" />
<img id="i18422" src="someimage4.jpg" />
I have an AJAX loop that repeats every 15 seconds using jQuery and it contains the following code:
Note: The if statement is inside the Ajax loop.
Where imgId is the requested ID from the Ajax call.
//Passes the IDs retrieved from Ajax, if the IDs exist on the page the animation is triggered.
if ( $('#i' + imgId ).length )
{
var pickimage = '#i' + imgId;
var stop = false;
function highlight(pickimage) {
$(pickimage).animate({color: "yellow"}, 1000, function () {
$(pickimage ).animate({color: "black"}, 1000, function () {
if (!stop) highlight(pickimage);
});
});
}
// Start the loop
highlight(pickimage);
}
It works great, even with multiple images. But I had originally used this with one image.
The problem is I need an interrupt. Something like:
$(img).click(function () {
stop = true;
});
There's two problems:
1.)This obviously stops all animations. I can't wrap my head around how I could write something that only stops the animation of the image that's clicked.
2.)The Ajax retrieves IDs, sometimes those IDs appear more than once every few minutes, which means it would repeat the animations on top of each other if the image exists. I could use some help figuring out how to detect if an animation is already running on an image, and do nothing if the animation is already triggered on an image.
You can hit two birds with one stone ;)
1) Don't use the stop variable. Add a class to each img:
// Instead of: var stop = false;
$(pickimage).addClass("animating");
// Instead of: if (!stop) highlight(pickimage);
if ($(pickimage).hasClass("animating")) highlight(pickimage);
// Instead of: $(img).click(function () { stop = true; });
$(img).click(function () { $(this).removeClass("animating"); });
2) Same thing, check the class!
if ($(pickimage).hasClass("animating")) return;