I've got a clickcounter onclick effect for my webpage, and when I click it, a text that says
You have clicked the button - ??? - times (??? would be the amount of clicks)
The onclick effect works great, but I was wondering if It's possible to change the display of the result. You see, I would like it to instead of having "You have clicked the button", have a miniature version of the picture, so it's like
miniature_image - ???
If that's at all understandable.
This is my current script for my button
Javascript
function clickCounter(){
var audio = document.getElementById("audio");
audio.play();
if(typeof(Storage)!=="undefined"){
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="<center><b>You have clicked the poop
</b>"+ localStorage.clickcount + "<b> times!</b></center>";
}
else{
document.getElementById("result").innerHTML="I'm sorry to inform you that your browser
does not support this web storage... I guess you could say that your browser is...
shit! awwww yeaahh!";
}
cursor: pointer;
}
HTML
<center>
<font face="chiller" color="#603913" "font size="300" <align="center"><b>Click the
poop!</b>
</center>
<center>
<p><picture onclick="clickCounter()"><picture
onmouseover="document.getElementById('touch').play()"><img src="poop.png"></button></p>
</center>
<audio id="audio" src="fart-01.wav"></audio>
<audio id="touch" src="sticky goo.wav"></audio>
<div id="result"></div>
I've already tried swapping out the "You have clicked the button" part with image source. like this
document.getElementById("result").innerHTML="<center><img src="poopamount">"+ localStorage.clickcount + "</center>";
but that just results in the button onclick effect disappearing. I've also tried using document.GetElementById("image"), but that didn't work either (not sure if i set it up correctly though)
How do I add a picture infront of the amount of clicks? I need it to be part of the result, because as you can see from my script, It's centered, and just positioning a picture wouldn't work because the amount of didgits change.
You can check out my webpage on the link on my stackoverflow profile if you think it would help.
Thanks to all in advance!
Here's a link to a fiddle that i believe solves your problem: http://jsfiddle.net/62bwav2L/
In your code I see two divs with the same id, which is not allowed - ids must be unique
<div id="result"></div>
...
<div id="result"></div>
so - changed that:
<div id="resultPoopClick"></div>
...
<div id="result"></div>
and then you can go ahead and set your innerHTML with the img tag and all (not that that's a particularly elegant way to do this - but it will work)
document.getElementById("resultPoopClick").innerHTML = "<center>" + localStorage.clickcount + " <img src='http://inftek1.dyndns.org/daniel/Poop/poop.png' width='5%'/></center>";