Как добавить изображения в текстовый дисплей для счетчика кликов? <изображение> <количество кликов>

У меня есть эффект клика по клику для моей веб-страницы, и когда я нажимаю на него, появляется текст

Вы нажали кнопку -??? - время (??? будет количество кликов)

Эффект 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>";

но это просто приводит к исчезновению эффекта нажатия кнопки. Я также пытался использовать document.GetElementById("изображение"), но это тоже не сработало (хотя я не уверен, правильно ли я его настроил)

Как мне добавить картинку перед количеством кликов? Мне нужно, чтобы это было частью результата, потому что, как вы можете видеть из моего сценария, он центрирован, и простое расположение изображения не сработает, потому что количество диджитов меняется.

Вы можете проверить мою веб-страницу по ссылке в моем профиле stackru, если считаете, что это поможет.

Спасибо всем заранее!

Источник

2 ответа

Решение

Вот ссылка на скрипку, которая, по моему мнению, решает вашу проблему: http://jsfiddle.net/62bwav2L/

В вашем коде я вижу два div с одинаковым идентификатором, что недопустимо - идентификаторы должны быть уникальными

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

так - изменилось что:

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

и тогда вы можете пойти дальше и установить свой innerHTML с тэгом img и всем (не то, что это особенно элегантный способ сделать это - но это будет работать)

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

Это может быть проблемой из-за времени запуска сценария.

Вот исправление и оно работает для меня

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

Источник
Другие вопросы по тегам