如何在點擊計數器文字顯示中添加圖片？ <image><amount of clicks>

Question

我的網頁具有clickcounter onclick效果，當我單擊它時，會顯示一條文字

您單擊了按鈕-??? -次（???是點擊次數）

onclick效果很好，但是我想知道是否可以更改結果的顯示。 您看到的是，我希望它不是顯示“您已單擊按鈕”，而是顯示圖片的微型版本，就像

miniature_image-???

如果那完全可以理解。

這是我當前按鈕的腳本

使用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>

我已經嘗試過將“您已單擊按鈕”部分換成了圖像源。 像這樣

  document.getElementById("result").innerHTML="<center><img src="poopamount">"+ localStorage.clickcount + "</center>";

但這只會導致按鈕的onclick效果消失。 我也嘗試過使用document.GetElementById（“ image”），但這也不起作用（不確定我是否正確設置了）

如何在點擊量前添加圖片？ 我需要將它作為結果的一部分，因為正如您從腳本中看到的那樣，它是居中的，並且僅放置圖片是行不通的，因為Didgits的數量會發生變化。

如果您認為有幫助，可以在我的stackoverflow配置文件上的鏈接上查看我的網頁。

預先感謝所有人！

Answer 1

由於觸發腳本的時間，這可能是一個問題。

這是修復程序及其對我有用

<center>
    <p>
        <picture onclick="clickCounter()">
            <picture onmouseover="document.getElementById('touch').play()">
                <img src="http://inftek1.dyndns.org/daniel/Poop/poop.png">
                </button>
    </p>
</center>
<audio id="audio" src="http://inftek1.dyndns.org/daniel/Poop/fart-01.wav"></audio>
<div id="result"></div>
<audio id="touch" src="http://inftek1.dyndns.org/daniel/Poop/sticky goo.wav"></audio>
<div id="result"></div>

<script>
    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>" + localStorage.clickcount + "</center>";
        } else {
            document.getElementById("result").innerHTML = "Your browser does not support the contents of this webpage";
        }
        //cursor: pointer;
    }
</script>

這是小提琴

http://jsfiddle.net/b6ttzq7z/2/

Answer 2

這是我認為可以解決您問題的小提琴的鏈接： http : //jsfiddle.net/62bwav2L/

在您的代碼中，我看到兩個具有相同ID的div，這是不允許的-ID必須是唯一的

<div id="result"></div>
...
<div id="result"></div>

所以-改變了：

<div id="resultPoopClick"></div>
...
<div id="result"></div>

然后您可以繼續使用img標簽和所有標簽設置您的innerHTML（這不是這樣做的一種特別優雅的方法-但它可以工作）

 document.getElementById("resultPoopClick").innerHTML = "<center>" + localStorage.clickcount + " <img src='http://inftek1.dyndns.org/daniel/Poop/poop.png' width='5%'/></center>";