0

私は基本的にコインを裏返すJavaScript関数を書いています。画像を返そうとしていますが、今のところうまくいきません。私は img src タグを使用して変数に値を割り当てていますが、どういうわけかそれが機能しないと思われます。これが実際にどのように行われるかを皆さんに確認したかったのですか?

これが私のコードです：

<script type = text/javascript>

        var headsCount = 0;
        var tailsCount = 0;     

        function start()
        {
            var buttonTwo = document.getElementById("coinButton");
            buttonTwo.addEventListener("click", coinResult, false);
        }

        function flip()
        {
            var faceValue = Math.floor((Math.random()*2)+1);                

            if (faceValue == 1)
            {
                headsCount++;
                return true; 
            }
            else
            {
                tailsCount++;
                return false; 
            }
        }

        function coinResult()
        {
            var result = document.getElementById("coinToss");
            var coinCount = document.getElementById("countNumber");

            <img name = "Heads" src = "images/Heads.png" />

            if (flip() == true)
            {
                result.innerHTML = <img src = "images/Heads.png" alt = "Heads" />
            }
            else
            {
                result.innerHTML = <img src = "images/Tails.png" alt = "Tails" />
            }

            coinCount.innerHTML = "Heads Count: " + headsCount + " Tails Count: " + tailsCount;

        }

        window.addEventListener("load", start, false);

    </script>
4

2 に答える 2

3

innerHTML プロパティは、HTML を表す文字列を受け取る必要があるため、次のようになります。

result.innerHTML = "<img src='images/heads.png' alt='heads' />";

HTML で一重引用符の代わりに引用符を使用する場合 (可能であり、それを好む人もいます)、JavaScript エンジンが引用符がテキストであることを理解できるように、(その前にバックスラッシュを追加して) 引用符をエスケープする必要があります。次のように、文字列の開始または終了をマークしません。

result.innerHTML = "<img src=\"images/heads.png\" alt=\"heads\" />";

PS: あなたの coinToss 要素を div と考えています。

于 2013-02-14T15:08:07.453 に答える
-2

結果の行には必ず引用符 " と ' が必要で、/ でエスケープします

result.innerHTML = "<img src = 'images/\Heads.png' alt = 'Heads' />"

または、.src と .alt を使用して img をリロードします。

<html>
<head>
<script type=text/javascript>

function addEventtoButton(){
var element = document.getElementById('testing');
element.onclick = function coinResult () {
var a;
a = document.getElementById("coin");
if (false) {                        // or set if to true, or flip() as in original example
a.src='images/\Heads.png';
a.alt='Heads';          
} else {
a.src='images/\Tails.png';
a.alt='Tails';          
} };
}

</script>
</head>
<body onload='addEventtoButton()'>
<button id='testing'>testme</button>
<img name='coin' id='coin' src='images\Heads.jpg'>
</body>
</html>
于 2013-08-10T18:22:44.010 に答える