如何将图片添加到clickcounter文本显示中?<图像> <点击量>

丹尼尔·托斯滕森(Daniel Thorstensen)

我的网页有一个clickcounter onclick效果,当我单击它时,会显示一条文字

您单击了按钮-??? -次(???是点击次数)

onclick效果很好,但是我想知道是否可以更改结果的显示。您会看到,我希望它不是显示“您已单击按钮”,而是显示图片的缩影,就像

miniature_image-???

如果那完全可以理解的话。

这是我当前按钮的脚本

Java脚本

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配置文件上的链接上查看我的网页。

预先感谢所有人!

比尔吉特·马丁内尔(Birgit Martinelle)

这是我认为可以解决您问题的小提琴的链接: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>";

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章