如何将图片添加到点击计数器文本显示？ <图片> <点击次数>

Question

我的网页有一个点击计数器 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")，但这也不起作用（但不确定我是否正确设置）

如何在点击量前面添加图片？我需要它成为结果的一部分，因为正如您从我的脚本中看到的那样，它是居中的，并且仅仅定位图片是行不通的，因为 digits 的数量会发生变化。

如果您认为这会有所帮助，可以通过我的 * 个人资料上的链接查看我的网页。

提前感谢大家！

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>";