I have built rock paper scissors to run in a terminal/console window using prompts and alerts. I am now in the process of converting the game into something that is playable in a web browser with the use of the jQuery library.
To accomplish this I have made images of each of the hands: Rock paper & scissors. Now, I want a user to click on one of the hands and assign that move to a variable named move. Here is my code:
HTML:
<div class="grow pic">
<img src="rock.png" class=id="rock" alt="rock" height="75" width="75">
</div>
<div class="grow pic">
<img src="paper.png" id="paper" alt="paper" height="75" width="75">
</div>
<div class="grow pic">
<img src="scissor.png" id="scissors" alt="scissors" height="75" width="75">
</div>
And the jQuery I'm trying to implement:
var move;
$( "#id" ).click(function() {
move = $(this).attr('id');
});
So the question here, is how exactly do I make the id of an image assign to a variable named move. I keep getting an error saying "Uncaught ReferenceError: move is not defined(…)".
This makes no sense:
$( "#id" ).click(function() {
It attempts to select an element with the ID value 'id'. Instead, target images that are descendants of elements with a common class:
$('.pic img').click(function() {
Now your function should work as it is.
You may use this like:
$("div img").click(function(){
var move = $(this).attr('id');
});
var move;
$( ".id" ).click(function() {
move = $(this).attr('id');
$('#result').html(move);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grow pic">
<img src="rock.png" class=id id="rock" alt="rock" height="75" width="75">
</div>
<div class="grow pic">
<img src="paper.png" class=id id="paper" alt="paper" height="75" width="75">
</div>
<div class="grow pic">
<img src="scissor.png" class=id id="scissors" alt="scissors" height="75" width="75">
</div>
<div id=result></div>
Run the click event against the class
try
var move = document.getElementsByTagName(this).getAttribute("id");
Related
I'm building a simple html/css/vanilla js component to display images. I have the list of images on the top, and when I click on one of them, it must appear in the main container.
To do that I just change the img element src like this:
document.addEventListener('DOMContentLoaded', (event) => {
var mainImg = document.getElementById("mainImg");
var thumbnailContainer = document.getElementById("thumbnailContainer");
thumbnailContainer.addEventListener("click", (event) => {
var linkClicked = event.target.currentSrc;
mainImg.src = linkClicked;
});
});
Now I would like to add some animation, but I have some trouble with css transition, here's my html:
<div class="container">
<img id="mainImg" src="xxxxx" alt="car 2"/>
<div id="thumbnailContainer" class="thumbnailContainer">
<div class="thumbnail">
<img src="xxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
</div>
</div>
The thing that is bugging me is that the element that I click to trigger the transition doesn't need to change, but I just change the src property on the main image with JS.
How can I solve this?
So I want to add a class to all the images within particular <div> using javascript.
I have made this code that adds a class to all the images in the webpage:
$(function(){
$('img').addClass('posts');
});
But i want to add it only for a particular <div>.
And I need a different version that excludes the images from adding class within a <div>
How is it possible?
please, use find, it's better based on best practices of performance using jquery.
$('#your_div').find('img').addClass('your-class')
In pure javascript as asked:
window.onload = function() {
var imgs = document.querySelectorAll('div.div1 img');
[].forEach.call(imgs, function(element, index, array) {
// add a new class
element.classList.add("myclass");
// ..or remove old class
element.classList.remove("oldClass");
});
}
<div class="div1">
<img src="" alt="Smiley face" height="42" width="42" class="oldClass">
<img src="" alt="Smiley face" height="42" width="42" class="oldClass">
<img src="" alt="Smiley face" height="42" width="42" class="oldClass">
</div>
<div class="div2">
<img src="" alt="Smiley face" height="42" width="42">
<img src="" alt="Smiley face" height="42" width="42">
<img src="" alt="Smiley face" height="42" width="42">
</div>
<div class="div3">
<img src="" alt="Smiley face" height="42" width="42">
<img src="" alt="Smiley face" height="42" width="42">
<img src="" alt="Smiley face" height="42" width="42">
</div>
It seems like you've got more than enough responses to the first part of your question. As for the second, you can you use the :not pseudo-selector:
$(':not(#myDiv) > img').addClass('otherClass');
You can add more selectors in your function, like this:
$(function(){
$('.particular-div img').addClass('posts');
});
All the images inside .particular-div will add the class 'posts' to it.
give the div an id and do this
$(function(){
$('#myDiv img').addClass('posts');
});
You would have to have a way to specifically reference the div that you want to target and then target all of the images within that div.
For example, if you div had a particular ID, you can do something like this:
$('#divID img').addClass('posts');
Add that particular div an ID:
HTML CODE
<div id="myDiv" />
JS CODE
$(function(){
$('#myDiv img').addClass('posts');
});
Using the .find() should be used for filtering.
You can refer to this page to see the performance differences:http://jsperf.com/jquery-child-selector-vs-find/3
See fiddle: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/11/
HTML Example
<div id="someDiv">
<img src="http://lorempixel.com/400/200/" style="display: none">
<img src="http://lorempixel.com/400/200/" style="display: none">
<img src="http://lorempixel.com/400/200/" style="display: none">
</div>
Jquery
$('#someDiv').find('img').addClass('showIMG')
I have 5 small images and 1 image that is twice the size as the small ones. What I'm trying to do is whenever you hover on the small images the big image changes to the image you are hovering. I am having a hard time searching for methods and functions but luck as of yet. this is what I have
<div class="bigImg">
<img id="image0" src="images/image1.png">
</div>
<img id="image1" src="images/image1.png">
<img id="image2" src="images/image2.png">
<img id="image3" src="images/image3.png">
<img id="image4" src="images/image4.png">
<img id="image5" src="images/image5.png">
I was trying to add this function that I saw somewhere else here
function mouseOver() {
document.getElementById("image0").innerHTML = '<"image2.png"/>';
}
function mouseOut() {
document.getElementById("image0").innerHTML = '<img src="image1.png" />';
}
I wrote the img tag as
<img id="image1" onmouseover="mouseOver()" onmouseout="mouseOut()" src="images/image1.png">
for all of the images but wasn't working. Can someone steer me in the right direction, please?
This is how I did it:
function mouseOut() {
document.getElementById("image0").src = 'http://lorempixel.com/g/600/600/';
}
function changePic(elem) {
document.getElementById("image0").src = elem.src;
}
Here is the JSFiddle demo
If you want to do it using Jquery you can try this.
<div class="bigImg"></div>
<img class="imgLink" src="http://dummyimage.com/100x100/eb00eb/fff" target="http://dummyimage.com/100x100/eb00eb/fff">
<img class="imgLink" src="http://dummyimage.com/100x100/000/fff" target="http://dummyimage.com/100x100/000/fff">
<img class="imgLink" src="http://dummyimage.com/100x100/999/fff" target="http://dummyimage.com/100x100/999/fff">
JS
$('.imgLink').hover(function(){
$('.bigImg').css({'background':'url('+ $(this).attr('target') +')'});
},function(){
$('.bigImg').css({'background':''});
});
Demo here
Basic concept behind this is we have to catch mouseover and mouseout events. Now, on mouse over we have to change the src attribute of that particular Image and vice versa for getting back the original image.
Try this one :
function mouseOver(element) {
document.getElementById(element).src = 'https://www.google.co.in/images/google_favicon_128.png';
}
function mouseOut(element) {
document.getElementById(element).src = 'https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png';
}
<div class="bigImg"><img id="image0" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png"></div>
<img id="image1" onmouseover="mouseOver('image1')" onmouseout="mouseOut('image1')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image2" onmouseover="mouseOver('image2')" onmouseout="mouseOut('image2')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image3" onmouseover="mouseOver('image3')" onmouseout="mouseOut('image3')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image4" onmouseover="mouseOver('image4')" onmouseout="mouseOut('image4')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image5" onmouseover="mouseOver('image5')" onmouseout="mouseOut('image5')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
I have a list of images, i am trying to use Jquery to find the next image id from the current element.But i cannot seem to get the jquery to work.
<div class="grid" style="position: relative;">
<div class="preview">
<img src="1.jpg" id="175" alt="">
</div>
</div>
<div class="grid" style="position: relative;">
<div class="preview">
<img src="2.jpg" id="176" alt="">
</div>
</div>
<div class="grid" style="position: relative;">
<div class="preview">
<img src="3.jpg" id="177" alt="">
</div>
</div>
JavaScript
var childId=6;
$( ".grid" ).click(function() {
var image=$(this).find("img");
var imageId=image.attr("id")
show_image(imageId,childId);
});
function show_image(imageId,childId){
//need to get next image id in the group for next button , but code below is returning undefined
var nextImageId=$(".grid .preview #" + imageId).next("img").attr("id");
}
You cannot use .next() directly in this case, since images are not siblings to each other use,
var nextImageId= $("#" + imageId).closest('.grid').next(".grid").find('img').attr("id");
Use this, it will give you the image id in 'nextImageId' variable.
$( ".grid" ).click(function() {
var nextImageId = $(this).closest('.grid').next(".grid").find('img').attr("id");
});
use next() to get the next grid selector ,then find the img
$(".grid").click(function () {
var image = $(this).find("img");
var imageId = image.attr("id")
var nextImageId= $(this).next(".grid").find("img").attr("id") // get next image id
});
For http://jsfiddle.net/7HWxu/2/ I am trying to override the image loop with the four buttons so that when one is clicked the image changes. However, on click of "1" the image won't change. Any help greatly appreciated. Thanks,
Tom
The issue is that in this code:
<div class="fadein">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg"></div>
<div style="position:absolute;">
<!-- ImageReady Slices (1.jpg) -->
<table id="Table_01" width="251" height="61" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="/images/1_01.jpg" width="68" height="61" alt=""
onclick="document.getElementById('fadein').src='/1.jpg'">
</td>
<td>
<img src="/images/1_02.jpg" width="61" height="61" alt="">
</td>
<td>
<img src="/images/1_03.jpg" width="61" height="61" alt="">
</td>
<td>
<img src="/images/1_04.jpg" width="61" height="61" alt="">
</td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
You don't have any element with an id of "fadein". (And the div element that has a class of "fadein" doesn't have a meaningful src property.)
I note that you have jQuery on the page - rather than using inline event handlers, I suggest you use bind or delegate to manage the links:
// Your original code
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').
fadeOut().
next('img').
fadeIn().
end().
appendTo('.fadein');
}, 6500);
// Addenda
$("#Table_01").delegate("img", "click", function(e) {
// Show and hide images here based on what e.target is.
});
});
There's no element in your HTML with the "id" value "fadein", so the function returns null as it should. The outer containing <div> has the class "fadein", but not "id". You could change the <div> I guess:
<div class='fadein' id='fadein'>