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

How do I add pictures to clickcounter text display? <image> <amount of clicks>

本文关键字：gt lt 图像 显示 添加 计数器 文本      更新时间：2023-09-26

我的网页有一个点击计数器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>";

但这只会导致按钮点击效果消失。我也尝试过使用文档。GetElementById（"image"），但这也不起作用（但不确定我是否正确设置了它）

如何在点击量之前添加图片？我需要它成为结果的一部分，因为正如你从我的脚本中看到的，它是居中的，仅仅定位一张图片是行不通的，因为didjits的数量会改变。

如果你认为这会有所帮助，你可以在我stackoverflow个人资料的链接上查看我的网页。

提前感谢大家！

这可能是由于触发脚本的时间而导致的问题。

这是修复和它为我工作

<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/

这里有一个小提琴的链接，我认为它可以解决你的问题：http://jsfiddle.net/62bwav2L/

在您的代码中，我看到两个div具有相同的id，这是不允许的-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>";
相关文章：