0

Web ページに clickcounter onclick 効果があり、それをクリックすると、次のようなテキストが表示されます。

ボタンをクリックしました - ??? - 回 (??? はクリック数)

onclick 効果は素晴らしいですが、結果の表示を変更できるかどうか疑問に思っていました。ほら、「ボタンがクリックされました」じゃなくて、ミニチュア版の絵が欲しいので、

ミニチュア画像 - ???

それさえわかれば。

これは私のボタンの現在のスクリプトです

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") も使用してみましたが、どちらも機能しませんでした (ただし、正しく設定したかどうかはわかりません)。

クリック数の前に画像を追加するにはどうすればよいですか? 私のスクリプトからわかるように、結果の一部にする必要があります。中央に配置されており、数字の量が変化するため、画像を配置するだけでは機能しません。

役立つと思われる場合は、stackoverflow プロファイルのリンクから私の Web ページをチェックしてください。

事前にすべてに感謝します！

4

2 に答える 2

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/

于 2014-10-03T16:05:23.667 に答える
0

あなたの問題を解決すると私が信じているフィドルへのリンクは次のとおりです：http://jsfiddle.net/62bwav2L/

あなたのコードでは、許可されていない同じ ID を持つ 2 つの div が表示されます - ID は一意である必要があります

<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>";
于 2014-10-03T16:20:21.120 に答える