We Keep Coding

addEventListeter to an EventListener? (change the button)

I'm kinda new to js language, and I have this interesting project.
Have you ever played Poker?
So, when the user pressed the button, he sees three cards on the table. Then he presses the same 'check' button and he should see the fourth card, and then fifth.
How to change the button "job"? I mean. instead of making extra buttons for 4th and 5th card, can I make the game with only one?

Something like this can get you started:
var gamestate = "";
var update = function() {
switch (gamestate) {
case "":
$('#state').text("A(H) J(D) 10(S)") ;
gamestate = "flop";
break;
case "flop":
$('#state').text($('#state').text() + " 9(S)");
gamestate = "turn";
break;
case "turn":
$('#state').text($('#state').text() + " 4(H)");
gamestate = "river";
break;
case "river":
$('#state').text("");
gamestate = "";
break;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="state">
</div>
<a id='clickme' href="javascript:;" onclick="update()">Update</a>
where you have the ...text('info') blocks you would put your dealing cards code based on the game state.

Making Javascript Code Deploy Ready

I need to make this code deploy ready. I can't hard code these URL's in but for some reason any other way of coding this, breaks. Reference this question here: Upon Redirect of Form Submission within iFrame jQuery Not Detecting Updated Src Attribute
I basically need to have the switch check if the location CONTAINS the page name after 'settings/' i.e. iframe-home.php, update.php, or changepassword.php. I think thats how i fix this issue? But i'm not sure how. (Hope that makes sense)
Here is the code:
$(document).ready(function() {
$('iframe#settings-iframe').on('load', function() {
var location = this.contentWindow.location.href;
console.log('location : ', location);
switch (location) {
case "http://localhost/Makoto/profile/settings/iframe-home.php":
console.log(location);
activateHome();
break;
case "http://localhost/Makoto/profile/settings/changepassword.php":
console.log(location);
activatePassword();
break;
case "http://localhost/Makoto/profile/settings/update.php":
console.log(location);
activateName();
break;
}
});
});

Note I assume that you want dynamically check path without host part.
Create new link element, set href to location, compare it to pathname
// replace with this.contentWindow.location.href
var url = "http://localhost/Makoto/profile/settings/iframe-home.php";
/**
* http://localhost/Makoto/profile/settings/iframe-home.php
* will return /Makoto/profile/settings/iframe-home.php
*/
var link = $('<a>', {
href: url
})[0].pathname;
var parts = link.split('/');
var file = parts[parts.length - 1];
console.log(file);
switch (file) {
case "iframe-home.php":
activateHome();
break;
case "changepassword.php":
activatePassword();
break;
case "update.php":
activateName();
break;
}
function activateHome() {console.log('Activating home');}
function activatePassword() {console.log('Activating password');}
function activateName() {console.log('Activating name');}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Jssor refreshing .gif

I'm trying to load gif images into a jssor slider via code, but didn't work with my code and i don't know why.
The purpose is that each image refreshes when shown, cause the gif animation is not a loop, i have to do it this way.
Thanks in advance, here i put the code that is changing the images:
The variables wich will contain the images...
var imagen1 = new Image();
var imagen2 = new Image();
var imagen3 = new Image();
imagen1.src = "./1.gif";
imagen2.src = "./2.gif";
imagen3.src = "./3.gif";
And the code to change them...
function OnSlidePark(slideIndex, fromIndex) {
switch (slideIndex) {
case 0:
$('#i1').attr('src', imagen1.src);
break;
case 1:
$('#i2').attr('src', imagen2.src);
break;
case 2:
$('#i3').attr('src', imagen3.src);
break;
}
}
By the way, the sources and the Id's are working correctly

Will the following codes work?
function OnSlidePark(slideIndex, fromIndex) {
switch (slideIndex) {
case 0:
$('#i1').attr('src', '');
$('#i1').attr('src', imagen1.src);
break;
case 1:
$('#i2').attr('src', '');
$('#i2').attr('src', imagen2.src);
break;
case 2:
$('#i3').attr('src', '');
$('#i3').attr('src', imagen3.src);
break;
}
}

Outputting a picture based on a variable's number

I'm building a "game" where a user clicks on an image and a number is randomly generated. With this number an image is assigned and displayed. Essentially a Rock, Paper, Scissors game. I'm just trying to get the random image to display. However I'm confused as how to go about setting the variable and then displaying it.
Originally I tried creating a variable that inside the switch would be something as follows
case 1:
cpuChoice = <img id="rock" src="rock.jpg" name="rock" width="265" height="250" />
break;
And then do a $("#result").html(cpuChoice); (result being a div id) However I had no luck with that. Further research seemed to suggest I have to store images in a cache, which is what my code currently is set up for. Though I don't believe I'm understanding how to utilize it properly.
The images I'm using are stored in a file with the pages.
Below is an example of my current javascript page.
$(document).ready(function(){
var cpuImage = new Image();
rock.src = 'rock.jpg';
paper.src = 'paper.jpg';
scissors.src = 'scissors.jpg';
lizard.src = 'lizard.jpg';
spock.src = 'spock.jpg';
$("#paper").click(function(){
var ranNumberOne = 1 + Math.floor(Math.random() * 5);
// the switch is for assigning the image based on what number is generated
switch(ranNumberOne){
case 1:
document['rock'].src = rock.jpg;
break;
case 2:
document['paper'].src = paper.jpg;
break;
case 3:
document['scissors'].src = scissors.jpg;
break;
case 4:
document['spock'].src = spock.jpg;
break;
case 5:
document['rock'].src rock.jpg;
break;
}
document.['blank'].src =cpuImage.src;
});
blank is just the id of a temporary image I have. the code for it is as follows
<img id="blank" src="blank.jpg" name="blank" width="265" height="250" />
I've done alert's to make sure my onclicks and the random number generator are both working, which they are. It appears that my problem is just getting the image that "the computer picks" to show.

Ok. A few issues are happening here, all of which are solvable. So...
$(document).ready(function(){
// You don't need an image object, since you're only
// determining a string for `src` and applying it to an existing
// image object
var cpuImage = "";
/* Below you're assigning `src` properties to objects that don't exist. */
rock.src = 'rock.jpg';
paper.src = 'paper.jpg';
scissors.src = 'scissors.jpg';
lizard.src = 'lizard.jpg';
spock.src = 'spock.jpg';
/* I see what you're trying to do,
but try going about it a bit differently, example: */
var imageBank = {
'rock' : 'rock.jpg',
'paper' : 'paper.jpg',
'scissors' : 'scissors.jpg',
'lizard' : 'lizard.jpg',
'spock' : 'spock.jpg'
};
$("#paper").click(function(){
var ranNumberOne = 1 + Math.floor(Math.random() * 5);
// the switch is for assigning the image based on what number is generated
switch(ranNumberOne){
// Assign your 'cpuImage' variable to the associated imageBank key
case 1:
cpuImage = imageBank['rock'];
break;
case 2:
cpuImage = imageBank['paper'];
break;
case 3:
cpuImage = imageBank['scissors'];
break;
case 4:
cpuImage = imageBank['lizard'];
break;
case 5:
cpuImage = imageBank['spock'];
break;
}
// Old:
document.['blank'].src =cpuImage.src;
// JQuery syntax (assuming you have an image with id `blank`)
// New:
$("#blank").attr('src',cpuImage);
});
Keep in mind, using things like a dictionary AKA an object as an associative array (which the imageBank variable is) helps to include a bunch more information pertaining to rock, scissors, etc. in one easy-to-maintain place. You can add additional info as well, which will save you time and code in the future.
Hope this helps and best of luck!

In honor of Sheldon Cooper, this FIDDLE might help.
JS
$('.clickme').on('click', function(){
var randimage = Math.floor(Math.random() * 5) + 1;
$('.putmehere').html('');
$('.random1').html(randimage);
$('.holder img#i' + randimage).clone().appendTo('.putmehere');
});

html
<div id="container">
<img id="blank" src="blank.jpg" name="blank" width="265" height="250" />
</div>
js
$(function () {
$("#container")
.attr("data-name", $("img", this).attr("id"))
.on("click", function (e) {
var options = ["rock", "paper", "scissors", "lizard", "spock", "blank"];
var r = (function (n) {
return options[(n + Math.floor(Math.random() * options.length - n))]
})(1);
$("img", this).attr({
"id": r,
"name": r,
"src": r + ".jpg"
}).parent().attr("data-name", r);
});
});
jsfiddle http://jsfiddle.net/guest271314/e3EXs/

changing <img> tag src with javascript

I have been trying to use javascript to change the image on a webpage I have made. so far my code dosn't do anything at all when I click on the original image. this is my first experiment with JS in a html doc so i could be something simple about how i have to use it.
<h1>heading name</h1>
<div>
<img alt="alt text"title='hover over text'id='chango'src="images/rsz_josh.jpg"onclick="changeImage()"/>
<script language="javascript">
var changeImage = function(){
img1="images/rsz_josh.jpg";
img2="images/rsz_josh2.jpg";
img3="images/rsz_josh3.jpg";
switch(document.getElementById('chango').src){
case img1:
document.getElementById("chango").src=img2;
break;
case img2:
document.getElementById("chango").src=img3;
break;
default:
document.getElementById("chango").src=img1;
break;
};
};
</script>
</div>

The reason is that document.getElementById('chango').src returns an absolute URL to the image, not a relative one. Thus none of your case statements match.
An idea for fixing that is to split the URL at the slashes and just compare the filename without any path.
EDIT: A slightly easier way would be to use JavaScript's indexOf to see if the URL contains the string. This assumes none of the image names are substrings of other image names.
var changeImage = function(){
img1 = "rsz_josh.jpg";
img2 = "rsz_josh2.jpg";
img3 = "rsz_josh3.jpg";
console.log(document.getElementById('chango').src);
imgUrl = document.getElementById('chango').src
if (imgUrl.indexOf(img1) != -1) {
document.getElementById("chango").src = 'images/' + img2;
}
else if (imgUrl.indexOf(img2) != -1) {
document.getElementById("chango").src = 'images/' + img3;
}
else {
document.getElementById("chango").src = 'images/' + img1;
}