Onclick（）イベント：イメージのランダムな外観

私のコードはウェブページの中央にイメージを表示し、クリックが外側または内側のイメージの場合は2つのアクションを行います。私は、ページの初期サイズにとどまりながら、onclick（）イベントごとに画像の位置をランダムに変更したい（クリックの有無にかかわらず）。Onclick（）イベント：イメージのランダムな外観

2つの動作は正しく行われますが、画像の位置は変わりません。誰かが私が何を変えるべきか教えてくれますか？

<html> 
    <head> 
    <title>random position</title> 
    </head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"> 
    $(window).height(); 
    $(window).width(); 
    </script> 

    <body> 

    <style> 

    #myImage { position: absolute; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin:auto; } 
    </style> 

    <script> 
function moveImg() { 
    var img = document.getElementById("myImage"); 

    var width = $(img).width(); 
    var height = $(img).height(); 


    document.addEventListener("click", function(e) { 
    var offset = $(img).offset(); 
    if (e.target === img) { 
     action 1; 
    } 
    else { 
    action 2; 
    } 
    // GENERATE RANDOM LOCATION IN BOTH CASES 
    img.offset.left = Math.floor(Math.random() * (window.width()- 0) + 0); 
    img.offset.top = Math.floor(Math.random() * (window.height()- 0) + 0); 


    }, false); 
} 
    </script> 
     <img id="myImage" src="img.gif" onclick="moveImg()"> 
    </body> 
</html>

出典

2017-04-03 Gigi

「アクション1;」と「アクション2;」はどういう意味ですか？私の推測では、このコードが実行されるとJSエラーが発生します。あなたはまた、クリックごとにますます多くのイベントリスナーを追加し続けています... –

私はランダムな位置の部分を使わずに同じコードを実行するといいです。私が前にrondom posionを生成する別の方法を使用していました（下記）。それはうまくいったが、それは完全ではなかった：/ * var x = Math.floor（Math.random（）*（max - min）+ min）; var y = Math.floor（Math.random（）*（max - min）+ min）; img.style.top = x + "px"; img.style.left = y + "px"; */ – Gigi

位置を変更するために使用していたコードは残念です。var x = Math.floor（Math.random（）* 400）; var y = Math.floor（Math.random（）* 400）; img.style.top = x + "px"; img.style.left = y + "px"; – Gigi

ここにはいくつかの問題があります。ユーザーがクリックすると関数が呼び出されますが、その関数内でそのイメージのクリックに対してイベントリスナーを割り当てています。これは、クリックごとにイベントリスナーを増やし続けることを意味するものではありません。以下のコードを変更して、すべてのクリックではなく、一度イベントリスナーを追加する方法を示しました。

第2に、action 1とaction 2は実際には意味がありません。私はあなたがそこで達成しようとしていることを私が確信していないので、それらをコメントしました。

また、イメージの上部および左の属性を間違って変更しようとしました。私はcss()機能を使用するように修正しました。

以下のコードは、JavaScriptの変更点を示しています。または可能性がありますclick here

$(document).ready(function() { 

    var img = document.getElementById("myImage"); 

    var width = $(img).width(); 
    var height = $(img).height(); 


    document.addEventListener("click", function(e) { 
    var offset = $(img).offset(); 
    if (e.target === img) { 
     //action 1; 
    } 
    else { 
    //action 2; 
    } 
    // GENERATE RANDOM LOCATION IN BOTH CASES 
    $(img).css({ 
    top: Math.floor(Math.random() * $(window).height()), 
    left: Math.floor(Math.random() * $(window).width())}); 
    }, false); 
});

出典

2017-04-03 13:58:06

こんにちはサム、はいアクション1とアクション2は、if-elseステートメントでやっていることの名前です。イベントリスナーを調整していただきありがとうございますが、あなたのコードでは、初期ページサイズ内でイメージを（ランダムに）移動するという私の主な問題は解決していません。どうすればいい？ – Gigi

以下のコードを使用すると、画像は常に画面の右側に表示されますが、同じ確率で画面のどの部分にも画像が表示されるようにします。：Math.floor（Math.random（） *（$（window）.width（） - width）+ 0）、 top：Math.floor（$（window）.height（） - height）+）}）; – Gigi

@Gigi「画面の右側部分」とはどういう意味ですか？私はちょうどチェックし、それは実際に動作するはずです。 Math.random（）は0と1の間の数値を返します。したがって、ウィンドウの幅/高さを乗算すると、ウィンドウ内のランダムな場所が選択されます。私はちょうどそれをテストし、それは動作するようです。 –

Onclick（）イベント：イメージのランダムな外観

答えて

関連する問題