Hi I am new to this and still learning haha so go easy on me.
I am trying to make a simple recognizing game using map symbols as the images.
I have got the start button when clicked will ask you a question but cannot seem to get a random picture to appear as well. I also what the grey stars to light up every time the user selects the right button/symbol.
Here is the code:
<!DOCTYPE html>
<style>
body{ background-color: lightblue; }
</style>
<html>
<head>
<title>OS Map Symbols</title>
<meta charset="utf-8" />
</head>
<body>
<p> <input onclick="btnStart(); displayRandomImage();" type="button" value="Start" /> </p>
<input id="btnTrain" type="button" value="Train Station" disabled="disabled"/>
<input id="btnBus" type="button" value="Bus Station" disabled="disabled"/>
<input id="btnYouth" type="button" value="Youth Hostel" disabled="disabled"/>
<input id="btnFootpath" type="button" value="FootPath" disabled="disabled"/>
<input id="btnBridle" type="button" value="Bridleway" disabled="disabled"/>
<input id="btnWorship" type="button" value="Place of Worship" disabled="disabled"/>
<input id="btnHouse" type="button" value="Public House" disabled="disabled"/>
<input id="btnCar" type="button" value="Car Park" disabled="disabled"/>
<input id="btnRoad" type="button" value="Road" disabled="disabled"/>
<input id="btnPillar" type="button" value="Triangulation Pillar" disabled="disabled"/>
<center> <p> <p id="paragrapgh"> </p> </center>
<center> <div class="contents" id="content"></div> </center>
<img id="imgTrain.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_TS.jpg" width="100" height="100" style="display:none;"/>
<img id="imgBus.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_BS.jpg" width="100" height="100" style="display:none;"/>
<img id="imgYouth.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_YH.jpg" width="100" height="100" style="display:none;"/>
<img id="imgFootpath.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_FP.jpg" width="100" height="100" style="display:none;"/>
<img id="imgBridle.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_BW.jpg" width="100" height="100" style="display:none;"/>
<img id="imgWorship.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_PW.jpg" width="100" height="100" style="display:none;"/>
<img id="imgHouse.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_PH.jpg" width="100" height="100" style="display:none;"/>
<img id="imgCar.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_CP.jpg" width="100" height="100" style="display:none;"/>
<img id="imgRoad.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_RD.jpg" width="100" height="100" style="display:none;"/>
<img id="imgPillar.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_TP.jpg" width="100" height="100" style="display:none;"/>
<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar1" />
<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar2" />
<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar3" />
<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar4" />
<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar5" />
</body>
</html>
<script>
function btnStart() {
var x = document.getElementById("paragrapgh");
x.style.fontSize = "25px";
x.style.color = "red";
document.getElementById("paragrapgh").innerHTML = "What Is This Symbol?";
}
function displayRandomImage(){
var Images1 = new Array();
Images1[0]= "C:\Users\ekene\OneDrive\Pictures\MapSym_TS.jpg"
Images1[1]= "C:\Users\ekene\OneDrive\Pictures\MapSym_BS.jpg"
Images1[2]= "C:\Users\ekene\OneDrive\Pictures\MapSym_YH.jpg"
Images1[3]= "C:\Users\ekene\OneDrive\Pictures\MapSym_BW.jpg"
Images1[4]= "C:\Users\ekene\OneDrive\Pictures\MapSym_PH.jpg"
Images1[5]= "C:\Users\ekene\OneDrive\Pictures\MapSym_RD.jpg"
Images1[6]= "C:\Users\ekene\OneDrive\Pictures\MapSym_FP.jpg"
Images1[7]= "C:\Users\ekene\OneDrive\Pictures\MapSym_PW.jpg"
Images1[8]= "C:\Users\ekene\OneDrive\Pictures\MapSym_CP.jpg"
Images1[9]= "C:\Users\ekene\OneDrive\Pictures\MapSym_TP.jpg"
var random = Images1[Math.floor(Math.random() * Images1.length)];
document.getElementById("content").innerHTML = random;
}
</script>
You were very close. The issue you're encountering can be solved using the addEventListener method of connecting events to elements. In this case, adding an id to your start button and firing the events when clicked would look like this
JSFIDDLE
HTML
<input id="startButton" type="button" value="Start" />
JS
var startButton = document.getElementById('startButton');
startButton.addEventListener('click', function(){
btnStart();
displayRandomImage();
});
It's worth mentioning you have a number of HTML syntax issues including unclosed tags, style and script tags outside of the html element, using . in id attributes, and using deprecated tags like center.
Unfortunately, because you have locally linked images, im not sure if you're asking how to make the gif items animate again (Can you control GIF animation with Javascript?) or if you're asking about swapping image src using js (Programmatically change the src of an img tag)
From a coding perspective, the way you're going about trying to link up images to the buttons could be made far simpler for yourself by starting with a JS object, and generating items from there, especially as you have a consistent path to images. Something like this: JSFIDDLE
Related
I have three buttons, in which their images are hidden. Suppose that I press the button "Square", the square image will popup. When I press the "Circle" button, only the circle image will popup and the square image will be hidden and vice versa. However for my code when I click the button, it will just pop up to the top of the page without displaying the image.
function showImage() {
var image = document.getElementById('sqimg').style.visibility = "visible";
}
function showImage2() {
var image = document.getElementById('cirimg').style.visibility = "visible";
}
function showImage3() {
var image = document.getElementById('trimg').style.visibility = "visible";
}
<html>
<body>
<div>
<form>
<button onclick="showImage()" name="square" value="Square">Square</button>  
<button onclick="showImage2()" name="Circle" value="Circle">Circle</button>  
<button onclick="showImage3()" name="Triangle" value="Triangle">Triangle
</button>
</form>
<form>
<img src="square.png" id="sqimg" style="visibility:hidden" width="100" height="100">
<img src="circle.png" id="cirimg" style="visibility:hidden" width="100" height="100">
<img src="triangle.png" id="trimg" style="visibility:hidden" width="100" height="100">
</form>
</div>
</body>
</html>
Instead of three separate functions create a single function. In that single function pass the id of the image that you want to show as an argument.
Also use css class instead of inline style.So in the function check if if there exist an element with class show. If it exist then remove the class show from it
default button type is submit so add button type as button else it will be able to submit the form
function showImage(elem) {
if (document.getElementsByClassName('show')[0] !== undefined) {
document.getElementsByClassName('show')[0].classList.remove('show');
}
var image = document.getElementById(elem).classList.add('show');
}
.hidden {
visibility: hidden;
}
.show {
visibility: visible;
}
<div>
<form>
<button type='button' onclick="showImage('sqimg')" name="square" value="Square">Square</button>  
<button type='button' onclick="showImage('cirimg')" name="Circle" value="Circle">Circle</button>  
<button type='button' onclick="showImage('trimg')" name="Triangle" value="Triangle">Triangle </button>
</form>
</div>
<form>
<img src="square.png" id="sqimg" class='hidden' width="100" height="100">
<img src="circle.png" id="cirimg" class='hidden' width="100" height="100">
<img src="triangle.png" id="trimg" class='hidden' width="100" height="100">
</form>
That is because of form tag for button controls as you are handling click event for each button so no need to use form,
Try below code:
function showImage() {
var image = document.getElementById('sqimg').style.visibility="visible";
document.getElementById('cirimg').style.visibility="hidden";
document.getElementById('trimg').style.visibility="hidden";
}
function showImage2() {
var image = document.getElementById('cirimg').style.visibility="visible";
document.getElementById('trimg').style.visibility="hidden";
document.getElementById('sqimg').style.visibility="hidden";
}
function showImage3() {
var image = document.getElementById('trimg').style.visibility="visible";
document.getElementById('cirimg').style.visibility="hidden";
document.getElementById('sqimg').style.visibility="hidden";
}
<html>
<body>
<div>
<button onclick="showImage()" name="square" value="Square">Square</button>  
<button onclick="showImage2()" name="Circle" value="Circle">Circle</button>  
<button onclick="showImage3()" name="Triangle" value="Triangle">Triangle
</button>
</div>
<form>
<img src="square.png" id="sqimg" style="visibility:hidden" width="100" height="100">
<img src="circle.png" id="cirimg" style="visibility:hidden" width="100" height="100">
<img src="triangle.png" id="trimg" style="visibility:hidden" width="100" height="100">
</form>
</html>
Everytime you click one of your buttons your page is refreshing, thus making it seem as if your buttons are not working. This is happening because your buttons are within a <form> and so your form is submitting (hence refreshing) the page each time a button is clicked. If you remove <form></form> tags your page will not refresh and thus fix your issue.
See working example below:
<html>
<script>
function showImage() {
var image = document.getElementById('sqimg').style.visibility = "visible";
}
function showImage2() {
var image = document.getElementById('cirimg').style.visibility = "visible";
}
function showImage3() {
var image = document.getElementById('trimg').style.visibility = "visible";
}
</script>
<body>
<div>
<button onclick="showImage()" name="square" value="Square">Square</button>  
<button onclick="showImage2()" name="Circle" value="Circle">Circle</button>  
<button onclick="showImage3()" name="Triangle" value="Triangle">Triangle </button>
</div>
<img src="square.png" id="sqimg" style="visibility:hidden" width="100" height="100" alt="square">
<img src="circle.png" id="cirimg" style="visibility:hidden" width="100" height="100" alt="circle">
<img src="triangle.png" id="trimg" style="visibility:hidden" width="100" height="100" alt="triangle">
</body>
</html>
How can I set or change the image using JavaScript or jQuery? The src attribute of img tags with id less than or equal to 3 (that is, img with id as 1, 2, 3) should be changed to (or set to) flower image, then that of img tags with id as 4, 5, 6 be animal image and that of img with id more than 6 (that is, 7, 8) be the default image.
I want to do this using the lesser than and greater than operators (< and >) but I don't want to use a button. I want it to happen automatically when I update the image. Is that possible?
I tried to do this but it is not working.
<div id="image">
<img id="img-1" src="..... "/>
<img id="img-2" src="..... "/>
<img id="img-3" src="..... "/>
<img id="img-4" src="..... "/>
<img id="img-5" src="..... "/>
<img id="img-6" src="..... "/>
<img id="img-7" src="..... "/>
<img id="img-8" src="..... "/>
</div>
Please answer with the full code using the image that make me understand.
It's hard to understand what you're looking for. Consider adding some details in your question. BUT: I made an example of how you at least can change the src or an image.
The easiest way (not the BEST, or most intelligent way) is to change the src attribute on your images. I made a fiddle to show what I mean. https://jsfiddle.net/nbhey2nz/ In short: When you click on the first button, it changes the src on images 1-3. When you click on the second button, it changes the src on images 4-6.
HTML:
<div id="image">
<img id="img-1" src="..... " />
<img id="img-2" src="..... " />
<img id="img-3" src="..... " />
<img id="img-4" src="..... " />
<img id="img-5" src="..... " />
<img id="img-6" src="..... " />
<img id="img-7" src="..... " />
<img id="img-8" src="..... " />
</div>
<div>
<button id="oneToThree">
Change 1-3
</button>
<button id="fourToSix">
Change 4-6
</button>
</div>
jQuery:
$(function(){
$("#oneToThree").click(function(){
$("#img-1").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
$("#img-2").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
$("#img-3").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
});
$("#fourToSix").click(function(){
$("#img-4").attr("src","https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
$("#img-5").attr("src", "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
$("#img-6").attr("src", "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
});
})
UPDATE!
If I understand your updated question correctly, you want to do this with an operator < and > right?
Well, I updated my fiddle to suit your update: https://jsfiddle.net/nbhey2nz/2/ This time doing it in a JavaScript way, so you get both versions. Notice I changed the image ID to only the integer, not the img-1 way. You could do it this way too, but then you would have to trim the text, and that's kind of not what you were asking about! ;)
HTML:
<div id="image">
<img id="1" src="..... " />
<img id="2" src="..... " />
<img id="3" src="..... " />
<img id="4" src="..... " />
<img id="5" src="..... " />
<img id="6" src="..... " />
</div>
<div>
<button id="oneToThree">
Change images
</button>
</div>
JS:
$(function(){
$("#oneToThree").click(function(){
for(var i = 0; i < document.images.length; i++){
if(document.images.item(i).id <= 3){
document.images.item(i).src = "http://www.small-hydro.com/images/home_btn_small.jpg";
} else if(document.images.item(i).id > 3 && document.images.item(i).id < 6){
document.images.item(i).src = "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif";
} else {
document.images.item(i).src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png";
}
}
});
})
**Just copy and paste this..., Not sure how data is comming. if it is comming through ajax then you need to use setinterval.
Might be it will work, if not please let me know (amitq7000#gmail.com)**
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image change by areraj</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$("#image img#img-1").attr("src","http://www.top13.net/wp-content/uploads/2014/11/2-small-flowers.jpg");
$("#image img#img-2").attr("src","http://www.top13.net/wp-content/uploads/2014/11/7-small-flowers.jpg");
$("#image img#img-3").attr("src","http://www.top13.net/wp-content/uploads/2014/11/4-small-flowers.jpg");
$("#image img#img-4").attr("src","http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
$("#image img#img-5").attr("src","http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
$("#image img#img-6").attr("src","http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
});
</script>
<style>
img{width:50px; height:50px; display:inline-block; margin-right:5px;}
</style>
</head>
<body>
<div id="image">
<img id="img-1" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-2" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-3" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-4" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-5" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-6" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-7" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-8" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
</div>
</body>
</html>
This question already has answers here:
Changing the order of elements
(4 answers)
Closed 8 years ago.
Help me to solve this trivial problem.
I need to change an image order within button_Click. How can I do this?
Actualy I need the **simplest** way, **no jQuery**.
Will be very grateful for piece of working code with explanation - It's a headache for me
[Here][1] is my code
PS I already got some advises, but all them conneted to jQuery
No jQuery
<div id="one">
<input id="b1" value="Change the image order" onclick="change_order()" type="button"/>
<h1 style="font-size: 12"> Header HeaderHeaderHeader</h1>
<p style="font-size:8"> text text text </p>
</div>
<div id="picContainer">
<img id="pict_01" src="http://heaversfarm.files.wordpress.com/2013/01/i-love-maths.jpg" />
<img id="pict_02" src="http://www.uplandsoutreach.org/wp-content/uploads/2013/04/20maths1.jpg" />
<img id="pict_03" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" />
<img src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" />
</div>
Hope you find the below code working as per your requirement.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click me</button><br/>
<br/>
<img height="50" width="50" id="demo1" src="http://www.largeyellowbutton.com/largeyellowbutton.jpg"></img>
<br/>
<img height="50" width="50" id="demo2" src= "http://libn.com/wp-files/graphics/register-button_0.jpg"></img>
<br/>
<img height="50" width="50" id="demo3" src= "http://mygimptutorial.com/images/button-with-reflection/11.jpg"></img>
<script>
function myFunction() {
var temp=document.getElementById("demo1").src;
document.getElementById("demo1").src = document.getElementById("demo2").src;
document.getElementById("demo2").src = document.getElementById("demo3").src;
document.getElementById("demo3").src = temp;
}
</script>
</body>
</html>
Use the code which I have posted above in case you know the number of image inside your div. If your unsure about the number of images your going to add then use the below code.
<html>
<head>
<script>
function myFunction() {
var count=document.getElementById("picContainer").getElementsByTagName("img").length;
//below code captures the first image source before
//changing the image order. This is also used to assign as source to the
// last image tag.
var temp=document.getElementById("pict_01").src;
var i;
for(i=1;i<=count;i++)
{
//If value of i is equal to count then, assign the first image source
// captured in temp variable to the last image inside the div.
if(i==count){
document.getElementById("pict_0"+i).src=temp;
}
//below code assigns image in decreasing order.
document.getElementById("pict_0"+i).src = document.getElementById("pict_0"+(i+1)).src;
}
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value=" Change an image order"></input>
<br/>
<div id="picContainer">
<img id="pict_01" src="http://heaversfarm.files.wordpress.com/2013/01/i-love-maths.jpg" />
<img id="pict_02" src="http://www.uplandsoutreach.org/wp-content/uploads/2013/04/20maths1.jpg" />
<img id="pict_03" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" />
<img id="pict_04" src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" />
</div>
</body>
</html>
I have a div that contains 1 to many images with next and previous image buttons. When a user clicks the next/previous button the current image style is changed from display:block to display:none using jquery. I need to get the ID attribute from the current image that is showing ie. has the display:block style applied.
<div id="propPhotos" name="propPhotos">
<div id="propPhotsDivList">
<div id="imageNameId0" style="display:block">
<img src="/PropertyImages/1/171fc210b4584f41936a078c4176c7e0.jpg" height="200" width="200" id="3"/>
</div>
<div id="imageNameId1" style="display:none">
<img src="/PropertyImages/1/114810f0067749eda8049d2f8269dd00.jpg" height="200" width="200" id="4"/>
</div>
<div id="imageNameId2" style="display:none">
<img src="/PropertyImages/1/8.jpg" height="200" width="200" id="15"/>
</div>
<div id="imageNameId3" style="display:none">
<img src="/PropertyImages/1/e8f182ab645549b399cebc67ed996d151.jpg" height="200" width="200" id="25"/>
</div>
</div>
<div>
<div class="row">
<input type="button" id="NextImage" value="Next Image" onclick="ImageNext()" /><input type="button" id="PrevImage" value="Previous Image" onclick=" ImagePrev()" />
</div>
<div class="row">
<button type="button" class="AddImage">Add Image</button><button type="button" class="RemoveImage">Remove This Image</button>
</div>
</div>
This is the path I am currently on which is in the next and previous image click handlers.
CurrentImageId = document.getElementById("imageNameId" + id).children('img').attr('id');
So when the user clicks either button its supposed to assign the id value to the CurrentImageId. This does not work for one and does not help on the initial load when neither next or previous image buttons have been clicked.
Well, there are a few different ways as far as the initial load is concerned. Here are a couple of examples:
Using the :visible selector:
var currentImageId = $('#propPhotsDivList > div:visible > img').prop('id');
Or perhaps combined with filter():
var currentImageId = $('#propPhotsDivList img').filter(function(){
return $(this).parent('div').is(':visible');
}).prop('id');
If the divs are hidden and shown correclty using your click handlers, you can use the same functionality inside them as well.
$('#propPhotsDivList').children('div:not(:hidden)').attr('id');
/* here i just have an image with a svg over it */
<!DOCTYPE html>
<html>
<body>
<div>
<img src="test.jpg" alt="Shirt Image" />
<img id="tt-mask" class="mask" src="mask11.png" alt="Mask Image" />
<div id="logo-mask" role="m ... z" ></div>
</div>
</body>
</html>
Well, you could just add a div wrapper around the svg element and put the click event on the div.