BinaryDevelop
  1. ホーム
  2. js

タイマーのエラーを解決する:Uncaught TypeError: that.setAttribute is not function

2022-01-24 17:32:58

エラーの理由
この中のタイマーはwindowを指しており、そのwindowには以下のような機能はありません。
解決方法
必要なthisをタイマーの外であらかじめ変数に代入しておく
タイマーの内部でこの変数の代わりに使用する
<スパン <スパン 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<svg id="s3" width="800" height="600" style="background-color: yellow">

</svg>
<script>
    function rn(max,min) {
        var num=Math.random()*(max-min)+min;
        return Math.floor(num)
    }
    function cn(max,min) {
        var r=rn(max,min)
        var g=rn(max,min)
        var b=rn(max,min)
        return `rgb(${r},${g},${b})`
    }
    console.log(rn(0,256))
    // Create a loop 30 times
    var s3=document.getElementById("s3")

    for(var i=0;i<30;i++) {
        //create circle
        var c = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "circle"
        );
        c.setAttribute("r", rn(10, 80))
        c.setAttribute("cx", rn(0, 800))
        c.setAttribute("cy", rn(0, 600))
        c.setAttribute("fill", cn(0, 256))
        c.setAttribute("fill-opacity", rn(0, 10) * (0.1))
        s3.appendChild(c)
        c.onclick=function () {
            //here this points to c
            var that=this
            // To prevent the circle from being clicked again, the message listener function
            that.onclick=null
            console.log(this)
            var x=this.getAttribute("r")
            var y=this.getAttribute("fill-opacity")
           var t= setInterval(function(){
                //this in the timer is window
             x++
             y*=0.9
            that.setAttribute("r",x)
            that.setAttribute("fill-opacity",y)
            if(y<0.001){
                 clearInterval(t)
                s3.removeChild(that)
            }
        },100)

        }
    }
</script>
</body>
</html>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します