Develop Reference

How can i make a different counter for each photo in js? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I'm having problems with counter in js, i've made 3 img tags with different id's, but having difficulties what to put in if statement for each counter? How can i see which photo has been clicked?
var count = 0;
function promptImg() {
var count1 = document.getElementById(test1)
var count2 = document.getElementById(test2)
var count3 = document.getElementById(test3)
}
<div id="flowers">
<div class="1">
<img id="test1" onclick="promptImg()" src="rosa-avon-crvena-ajevke-52-373-standard-1.png">
</div>
<div class="2">
<img id="test2" onclick="promptImg()" src="gerbera.jpg">
</div>
<div class="3">
<img id="test3" onclick="promptImg()" src="gipsofila.jpg">
</div>
</div>

If you want to know how to determine which image was clicked, make sure you pass this into the function assigned to the onclick attribute.
To keep track of click frequency, you can use object or a Set to store the associated count with the ID of the image.
const counter = { };
function promptImg(img) {
counter[img.id] = (counter[img.id] || 0) + 1;
console.log(JSON.stringify(counter));
}
body div {
display: flex;
flex-direction: row;
grid-column-gap: 1em;
align-content: center;
}
.as-console-wrapper { max-height: 2.667em !important; }
<div id="flowers">
<div class="1">
<img id="test1" onclick="promptImg(this)" src="http://placekitten.com/120/60" />
</div>
<div class="2">
<img id="test2" onclick="promptImg(this)" src="http://placekitten.com/150/75" />
</div>
<div class="3">
<img id="test3" onclick="promptImg(this)" src="http://placekitten.com/160/80" />
</div>
</div>
Or store the click as a data attribute using dataset.
const counter = { };
const displayClickFrequency = () =>
console.log(JSON.stringify([...document.querySelectorAll('img')]
.reduce((map, img) => ({
...map,
[img.id]: parseInt(img.dataset.clicked, 10) || 0
}), {})));
function promptImg(img) {
const previousValue = parseInt(img.dataset.clicked, 10) || 0;
img.dataset.clicked = previousValue + 1;
displayClickFrequency();
}
body div {
display: flex;
flex-direction: row;
grid-column-gap: 1em;
align-content: center;
}
.as-console-wrapper { max-height: 2.667em !important; }
<div id="flowers">
<div class="1">
<img id="test1" onclick="promptImg(this)" src="http://placekitten.com/120/60" />
</div>
<div class="2">
<img id="test2" onclick="promptImg(this)" src="http://placekitten.com/150/75" />
</div>
<div class="3">
<img id="test3" onclick="promptImg(this)" src="http://placekitten.com/160/80" />
</div>
</div>

You can do it by using an event listener and checking the id of its target element:
document.addEventListener("click", function(element) {
if (element.target.id === "test1") {
//do something
}
});

You can do that with one of there two options:
function promptImg() {
console.log(event.target);
}
[...document.querySelectorAll(".flowers-with-eventlistener img")].forEach(img => {
img.addEventListener("click", () => {
console.log(event.target)
})
})
img {
width: 100px;
height: 100px;
}
<div class="flowers-with-onclick">
<img onclick="promptImg()" src="rosa-avon-crvena-ajevke-52-373-standard-1.png" >
<img onclick="promptImg()" src="gerbera.jpg">
<img onclick="promptImg()" src="gipsofila.jpg">
</div>
<div class="flowers-with-eventlistener">
<img src="rosa-avon-crvena-ajevke-52-373-standard-1.png" >
<img src="gerbera.jpg">
<img src="gipsofila.jpg">
</div>

If you apply a class to all of the images, you can create an event listener to find out which one has been clicked.
You can test it yourself by using the snippet below and clicking the images. Hope this helped.
var images = document.querySelectorAll(".shared-class");
for (i = 0; i < images.length; i++) {
images[i].addEventListener("click", function() {
console.log(this)
})
}
<div>
<img src="#" id="test1" class="shared-class" />
<img src="#" id="test2" class="shared-class" />
<img src="#" id="test3" class="shared-class" />
</div>

You possibly wat to delegate your clicks to the container - in your case the flowers div
window.addEventListener("load", function() { // on page load
document.getElementById("flowers").addEventListener("click", function(e) { // on click in flowers
const tgt = e.target;
if (tgt.tagName === "IMG") {
console.log(tgt.id);
}
})
})
img { width: 200px; }
<div id="flowers">
<div class="1"> <img id="test1" src="https://pharmarosa.hr/galeria_ecomm/5413/rosa-avon-crvena-ajevke-52-373-standard-1.png" /> </div>
<div class="2"> <img id="test2" src="https://upload.wikimedia.org/wikipedia/commons/2/23/Azimut_Hotels_Red_Gerbera.JPG" /></div>
<div class="3"> <img id="test3" src="https://www.provenwinners.com/sites/provenwinners.com/files/imagecache/low-resolution/ifa_upload/gypsophila-festival-star-02.jpg" /> </div>
</div>

To notice when a user clicks an element (such as an image) on your webpage, you probably want to use the .addEventListener method on that element or one of its "ancestor" elements in the DOM.
Check out MDN's Event Listener page and see the verbose example in the snippet.
// Identifies some elements;
const
flowersContainer = document.getElementById("flowers"),
rosaImg = document.getElementById("rosa-img"),
gerberaImg = document.getElementById("gerbera-img"),
gipsofilaImg = document.getElementById("gipsofila-img"),
countersContainer = document.getElementById("counters");
// Calls `handleImageClicks` when the user clicks on flowersContainer
// (This "event delegation" lets us avoid adding a listener
// for each image, which matters more in larger programs)
flowersContainer.addEventListener("click", handleImageClicks);
// Defines `handleImageClicks`
function handleImageClicks(event){
// Listeners can access events, which have targets
const clickedThing = event.target;
// Calls `incrementCount` for the selected flower
if(clickedThing == rosaImg){ incrementCount("rosa"); }
else if(clickedThing == gerberaImg){ incrementCount("gerbera"); }
else if(clickedThing == gipsofilaImg){ incrementCount("gipsofila"); }
}
// Defines `incrementCount`
function incrementCount(flowerName){
const
// `.getElementsByClassName` returns a list of elements
// (even though there will be only one element in the list)
listOfMatchingElements = countersContainer.getElementsByClassName(flowerName),
myMatchingElement = listOfMatchingElements[0], // First element from list
currentString = myMatchingElement.innerHTML, // HTML values are strings
currentCount = parseInt(currentString), // Converts to number
newCount = currentCount + 1 || 1; // Adds 1 (Defaults to 1)
myMatchingElement.innerHTML = newCount; // Updates HTML
}
#flowers > div { font-size: 1.3em; padding: 10px 0; }
#flowers span{ border: 1px solid grey; }
#counters span{ font-weight: bold; }
<div id="flowers">
<div><span id="rosa-img">Picture of rosa</span></div>
<div><span id="gerbera-img">Picture of gerbera</span></div>
<div><span id="gipsofila-img">Picture of gipsofila</span></div>
</div>
<hr />
<div id=counters>
<div>User clicks on rosa: <span class="rosa"></span></div>
<div>User clicks on gerbera: <span class="gerbera"></span></div>
<div>User clicks on gipsofila: <span class="gipsofila"></span></div>
</div>

In your promptImg function if you use jquery, and you should, inside it add
var idClick=$(this).attr("id");
console.log("This link was clicked"+idClick);
and then you can easily IF it

Show a division on button click and hide other divisions

i've got 20/30 divs.
If i click on a button the onClick will tell the function to show welcomeDiv1
but it should also hide welcomeDiv2/3/4/5/6 etc..
Same with showing welcomeDiv7, then it needs to hide welcomeDiv1/2/3/4/5/6/8/9 etc..
Script:
function showDiv1() {
document.getElementById('welcomeDiv').style.display = "none";
document.getElementById('welcomeDiv1').style.display = "block";
}
^^ Now it actually should hide all divs named welcomeDiv.. expect welcomeDiv1
First code
<div class="websites">
<div id="welcomeDiv" style="display:none;" class="answer_list" ><object data="cv/cv.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
<div id="welcomeDiv1" style="display:none;" class="answer_list" ><object data="cv/6.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
</div>
And second code
<a title='Project 1'class="text1" onclick="showDiv()">Project 1</a>
<script>
function showDiv() {
document.getElementById('welcomeDiv1').style.display = "none";
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<a title='Project 2' class="text1" onclick="showDiv1()">Project 2</a>
<script>
function showDiv1() {
document.getElementById('welcomeDiv').style.display = "none";
document.getElementById('welcomeDiv1').style.display = "block";
}
</script>

You must use for loops, for example
function showDiv(div){
for (i = 0; i => 100; i++){
var x = document.getElementById('exampleDiv-' + i);
x.style.display = 'none';
//You can also use visibility to get animations work.
}
var y = document.getElementById('exampleDiv-' + i);
y.style.display = 'block';
}

You can refactor your HTML/Script. Persist target with the element, which can be later retrieved using Element.dataset property.
Learn to use addEventListener() to attach event handler.
Here is a sample snippet:
document.querySelectorAll('.button').forEach(function(element) {
element.addEventListener('click', function() {
var _this = this;
document.querySelectorAll('.welcome').forEach(function(welcome) {
if (_this.dataset.target == welcome.id) {
welcome.style.display = "block";
} else {
welcome.style.display = "none";
}
})
});
});
.welcome {
display: none
}
<button type="button" class="button" data-target="welcome1">1</button>
<button type="button" class="button" data-target="welcome2">2</button>
<button type="button" class="button" data-target="welcome3">3</button>
<br/>
<div class="welcome" id="welcome1">welcome1</div>
<div class="welcome" id="welcome2">welcome2</div>
<div class="welcome" id="welcome3">welcome3</div>

Also give each div a class WelcomeDiv. Then, you just hide the entire WelcomeDiv class and show the one you want. For example:
divs = document.getElementsByClassName("WelcomeDiv");
for (i = 1; i < divs.length; i++) {
divs[i].style.display = "none";
}
document.getElementById("WelcomeDiv1").style.display = "block";

A simple and easy solution for you:
<a title='Project 1'class="text1" onclick="showDiv('welcomeDiv1')">Project 1</a>
<a title='Project 2' class="text1" onclick="showDiv('welcomeDiv2')">Project 2</a>
<div class="websites">
<div id="welcomeDiv1" style="display:none;" class="answer_list" >1</div>
<div id="welcomeDiv2" style="display:none;" class="answer_list" >2</div>
</div>
<script>
function showDiv(div_id) {
var divsToHide = document.getElementsByClassName("answer_list"); //divsToHide is an array
for(var i = 0; i < divsToHide.length; i++){
divsToHide[i].style.display = "none"; // hide your divisions
}
document.getElementById(div_id).style.display = "block"; //show your division
}
</script>

Alright i fixed it my self, with some help of the lovely internet
function MyFunction(divName){
//hidden val
var hiddenVal = document.getElementById("tempDivName");
//hide old
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
//show div
var tempDiv = document.getElementById(divName);
tempDiv.style.display = 'block';
//save div ID
hiddenVal.Value = document.getElementById(divName).getAttribute("id");
}
And HTML 1:
<input id="tempDivName" type="hidden" />
<a title='Project 1'class="text1" OnClick="MyFunction('myDiv1');">Project 1</a>
<a title='Project 2' class="text1" OnClick="MyFunction('myDiv2');">Project 2</a>
<a title='Project 3' class="text1" OnClick="MyFunction('myDiv3');">Project 3</a>
And html 2:
<div id="myDiv1" style="display:none;" class="answer_list" ><object data="cv/cv.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
<div id="myDiv2" style="display:none;" class="answer_list" ><object data="cv/6.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
<div id="myDiv3" style="display:none;" class="answer_list" ><object data="cv/Practiced.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>

If you are trying without a loop as you have n set of a and div(loop through more elements affects performance), then I would suggest to go with adding show class to the showing div
function showDiv(t) {
if (document.querySelector('.show'))
document.querySelector('.show').className = "welcome";
document.getElementById(t.dataset.target).className = "welcome show";
}
.welcome {
display: none;
}
.show {
display: block;
}
.button {
background-color: #0095ff;
border-color: #07c;
cursor:pointer;
padding:0px 20px;
}
<button type="button" class="button" data-target="welcome1" onclick="showDiv(this)">1</button>
<button type="button" class="button" data-target="welcome2" onclick="showDiv(this)">2</button>
<button type="button" class="button" data-target="welcome3" onclick="showDiv(this)">3</button>
<br/>
<div class="welcome" id="welcome1">welcome1</div>
<div class="welcome" id="welcome2">welcome2</div>
<div class="welcome" id="welcome3">welcome3</div>
Using radio button
If you are trying without a loop as you have n set of a and div, then I would suggest to go with a hidden radio button method
function showDiv(t) {
document.getElementById(t.rel).click();
}
.answer_list {
display: none;
}
.webrad {
display: none;
}
.webrad:checked+.answer_list {
display: block;
}
.text1 {
background-color: #0095ff;
border-color: #07c;
cursor:pointer;
padding:0px 20px;
}
<div class="websites">
<a title='Project 1' rel="welcomeRadio" class="text1" onclick="showDiv(this)">Project 1</a>
<a title='Project 2' rel="welcomeRadio1" class="text1" onclick="showDiv(this)">Project 2</a>
</div>
<div class="websites">
<input id="welcomeRadio" class="webrad" type="radio" name="websites" />
<div id="welcomeDiv" class="answer_list">cv.pdf<object data="cv/cv.pdf" type="application/pdf" width="100%" height="100px;" class="cv">
</object></div>
<input id="welcomeRadio1" class="webrad" type="radio" name="websites" />
<div id="welcomeDiv1" class="answer_list">6.pdf<object data="cv/6.pdf" type="application/pdf" width="100%" height="100px;" class="cv">
</object></div>
</div>

How can I toggle texts and icons using jQuery?

I have an accordion.
When I click on show details :
the accordion content will expand,
the text will change from show details to hide details
the icon will change from + to x
click on it again should toggle back to its original state.
I couldn't get it to work. When I click on it, it stuck on the HIDE DETAILS state forever.
JS
$(".show-details-sk-p").click(function () {
$(".show-details-txt-sk-p-r").text("HIDE DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
});
Can someone please give me a little push here ?
I've put together a Fiddle - just in case it is needed.

Inspected the aciton and element behavior, find that #sk-p-r will have class in to decide whether its collapsed or not.
$(".show-details-sk-p").click(function () {
var isCollapse = $('#sk-p-r').hasClass('in');
var text = isCollapse ? 'SHOW DETAILS' : 'HIDE DETAILS';
var img = isCollapse ? 'http://s6.postimg.org/e9eydpbct/plus.png' : 'http://s6.postimg.org/bglqtob0d/remove.png'
$(".show-details-txt-sk-p-r").text(text);
$(".icon-sk-p-r-toggle").attr("src", img);
});

There's a lot of ways you can do this but your problem is that your 'click' doesn't have any way to set the 'show details' state from the code you have there.
In a really simple solution for this:
$(".show-details-sk-p").click(function () {
$(this).toggleClass('open')
if($(this).hasClass('open') === true){
$(".show-details-txt-sk-p-r").text("HIDE DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
}else{
$(".show-details-txt-sk-p-r").text("SHOW DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/bglqtob0d/plus.png");
}
});
This is one way to do it. I'm adding a class to the element here to track state and then conditionally setting the image and text based on that state to give you a true toggle. There are likely smarter and more efficient ways to do this but this should be a simple enough example to point you into the right direction.

I have added a boolean variable which is toggled whenever the accordion is clicked. Check out this fiddle
var show=false; //indicates whether the accordion is hidden
$(".show-details-sk-p").click(function () {
if(!show){
$(".show-details-txt-sk-p-r").text("HIDE DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
show=true;
}
else{
$(".show-details-txt-sk-p-r").text("SHOW DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/bglqtob0d/plus.png");
show=false;
}
});
I have used the show variable to determine what text to display on the accordion.

You need to revert text and image when collapsing an accordion
/* JavaScript */
$(".show-details-sk-p").click(function() {
if ($(this).data('shown') === true) {
$(this).data('shown', false);
$(".show-details-txt-sk-p-r").text("SHOW DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/bglqtob0d/plus.png");
} else {
$(this).data('shown', true);
$(".show-details-txt-sk-p-r").text("HIDE DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
}
});
/* CSS */
.sk-p-dash {
padding-left: 25px;
}
.panel {
border-radius: 0px !important;
}
.sk-p {
margin-right: 16px;
margin-left: 16px;
}
.panel-title,
.panel-body {
font-size: 10px;
}
.show-details-txt-sk-p-r {
padding-right: 12px;
}
.show-details-sk-p {
font-size: 9px;
padding-right: 5px;
}
.show-details-sk-p .icon-sk-p-r-toggle {
margin-top: -5px;
}
<!-- HTML -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="row sk-p">
<div class="col-md-12">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
PRE-REQUISITE(S) FOR ALL SKILLS IN EXERCISE
<span data-toggle="collapse" data-parent="#accordion" href="#sk-p-r" class="show-details-sk-p pull-right">
<span class="show-details-txt-sk-p-r">SHOW DETAILS</span>
<img width="20px" class="icon-sk-p-r-toggle" src="http://s6.postimg.org/bglqtob0d/plus.png">
</span>
</h4>
</div>
<div id="sk-p-r" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-lg-6">
<span>SOLVING EQUATIONS BY ADDITION OR SUBSTRACTION </span>
<br>
<br>
<div class="sk-p-dash">
<img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/m4phsikzh/review_video.png">
<span>WATCH VIDEO</span>
<br>
<br>
<img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/6yjg1kuyl/review_pdf.png">
<span>REVIEW LESSON</span>
</div>
</div>
<div class="col-lg-6">
<span>GRAPHING INEQUALITIES IN ONE VARIABLE </span>
<br>
<br>
<div class="sk-p-dash">
<img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/m4phsikzh/review_video.png">
<span>WATCH VIDEO</span>
<br>
<br>
<img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/6yjg1kuyl/review_pdf.png">
<span>REVIEW LESSON</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Simply toggle
better store the string values in variables
var txtHide = "HIDE DETAILS";
var txtShow = "SHOW DETAILS";
var rmvImage = "http://s6.postimg.org/e9eydpbct/remove.png";
var plsImage = "http://s6.postimg.org/bglqtob0d/plus.png";
$(".show-details-sk-p").click(function () {
$(".show-details-txt-sk-p-r").text($(".show-details-txt-sk-p-r").text()==txtHide ? txtShow :txtHide );
$(".icon-sk-p-r-toggle").attr("src",$(".icon-sk-p-r-toggle").attr("src")==rmvImage ? plsImage :rmvImage );
});
Check http://jsfiddle.net/ZigmaEmpire/bpaxpuhz/2/

Hiding div on button click

I have a script which has three buttons which shows a div when clicked, now my question is how do I hide those div's so let's say div 1 is opened and I click to open div 2, then make it show div 2 but hide div 1 so that I can have the div's be in the same position, but they only show if they are supposed to.
My script:
<!-- SUPPORT CONTACT FORM START-->
<div class="contactSupportButton"><input type="button" src=".png" alt="contact support button" style="height: 40px; width: 120px" onClick="showSupForm()"/>
<div id="contactSupportForm">
TEST
</div>
</div>
<script type="text/javascript">
function showSupForm() {
document.getElementById('contactSupportForm').style.display = "block";
}
</script>
<!-- SUPPORT CONTACT FORM ENDING-->
<!-- BUSINESS CONTACT FORM START-->
<div class="contactBusinessButton"><input type="button" src=".png" alt="contact business button" style="height: 40px; width: 120px" onClick="showBusForm()"/>
<div id="contactBusinessForm">
TEST
</div>
</div>
<script type="text/javascript">
function showBusForm() {
document.getElementById('contactBusinessForm').style.display = "block";
}
</script>
<!-- BUSINESS CONTACT FORM ENDING-->
<!-- OTHER CONTACT FORM START-->
<div class="contactOtherButton"><input type="button" src=".png" alt="contact other button" style="height: 40px; width: 120px" onClick="showOtherForm()"/>
<div id="contactOtherForm">
TEST
</div>
</div>
<script type="text/javascript">
function showOtherForm() {
document.getElementById('contactOtherForm').style.display = "block";
}
</script>
<!-- OTHER CONTACT FORM ENDING-->
css part:
#contactSupportForm{
display: none;
}
#contactBusinessForm{
display: none;
}
#contactOtherForm{
display: none;
}
Here is a JSFiddle to show the whole process of how it works.
http://jsfiddle.net/m0jdv6u0/3/

You could try this:
function showOtherForm(idElement) {
document.getElementById('contactOtherForm').style.display = "none";
document.getElementById('contactSupportForm').style.display = "none";
document.getElementById('contactBusinessForm').style.display = "none"
document.getElementById(idElement).style.display = "block"
}
And you call in each button passing the id of the div, like this:
showOtherForm('contactOtherForm')
Of course, you can make some verifications, so you don't need to set the display on the 3 divs, but I think you dont need that...
Hope it helped!

There's probably a more elegant way to use classes as selectors and achieve the same functional goal, but here's a solution that would enable you to add additional form / button elements without having to add additional show/hide blocks:
[Note - this is not significantly different from #Cleversou's answer]
function showForm(elemId){
var arr = ["Other", "Business", "Support"] ;
for(var i = 0; i < arr.length; i++){
if(elemId === "contact" + arr[i] + "Form"){
document.getElementById(elemId).style.display = "block";
} else {
document.getElementById("contact" + arr[i] + "Form").style.display = "none";
}
}
}
#contactSupportForm{
display: none;
}
#contactBusinessForm{
display: none;
}
#contactOtherForm{
display: none;
}
<!-- SUPPORT CONTACT FORM START-->
<div class="contactSupportButton"><input type="button" src=".png" alt="contact support button" style="height: 40px; width: 120px" onClick="showForm('contactSupportForm')"/>
<div id="contactSupportForm">
TEST
</div>
</div>
<script type="text/javascript">
</script>
<!-- SUPPORT CONTACT FORM ENDING-->
<!-- BUSINESS CONTACT FORM START-->
<div class="contactBusinessButton"><input type="button" src=".png" alt="contact business button" style="height: 40px; width: 120px" onClick="showForm('contactBusinessForm')"/>
<div id="contactBusinessForm">
TEST
</div>
</div>
<script type="text/javascript">
</script>
<!-- BUSINESS CONTACT FORM ENDING-->
<!-- OTHER CONTACT FORM START-->
<div class="contactOtherButton"><input type="button" src=".png" alt="contact other button" style="height: 40px; width: 120px" onClick="showForm('contactOtherForm')"/>
<div id="contactOtherForm">
TEST
</div>
</div>
<script type="text/javascript">
</script>
<!-- OTHER CONTACT FORM ENDING-->

Show Text when Clicking an Image

How can I make a ''spoiler'' but instead of a button there's a image? Here's the code I used.
<style type="text/css">
body,input
{
font-family:"Trebuchet ms",arial;font-size:0.9em;
color:#333;
}
.spoiler
{
border:1px solid #ddd;
padding:3px;
}
.spoiler .inner
{
border:1px solid #eee;
padding:3px;margin:3px;
}
</style>
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
<div class="spoiler">
<input type="button" onclick="showSpoiler(this);" value="Show/Hide" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
It isn't necessary to use this code, I only want it to be an image instead of a button.

It's working fine with me: http://jsfiddle.net/48PBY/
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://pbs.twimg.com/profile_images/858514627/eppaa_bigger.jpg" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>

<a href="javascript:;" onclick="showSpoiler(this);" >
<img src="image/path"></a>
try this