Fatal编程技术网
  • javascript/
  • Javascript Html按钮无法启动与Document.clear同名的事件函数

Javascript Html按钮无法启动与Document.clear同名的事件函数

javascript html button

Javascript Html按钮无法启动与Document.clear同名的事件函数,javascript,html,button,dom-events,Javascript,Html,Button,Dom Events,我一直在玩地图绘制工具。我开始将一些更高级的功能（例如绘制、生长、种子）分离成单独的按钮。除了“清除”按钮外，所有按钮都可以工作。clear按钮应该向clear函数触发事件，但它没有。按钮点击被断点捕获，但清除功能不起作用。我试着从清除按钮调用不同的函数，它们都工作了。我可以编写像“grow（）；draw（）；”这样的javascript序列，而且很有效。我甚至创建了一个新函数“other”，只是为了重定向到clear函数。令人难以置信的是，这起作用了。我不知道为什么我的代码不允许我从clear

我一直在玩地图绘制工具。我开始将一些更高级的功能（例如绘制、生长、种子）分离成单独的按钮。除了“清除”按钮外，所有按钮都可以工作。clear按钮应该向clear函数触发事件，但它没有。按钮点击被断点捕获，但清除功能不起作用。我试着从清除按钮调用不同的函数，它们都工作了。我可以编写像“grow（）；draw（）；”这样的javascript序列，而且很有效。我甚至创建了一个新函数“other”，只是为了重定向到clear函数。令人难以置信的是，这起作用了。我不知道为什么我的代码不允许我从clear按钮调用clear函数

<html>
  <head>
    <style>
      canvas {background-color:black;}
    </style>
    <script>
      var dim = 400;
      var pixel = 1;
      var heights;
      var colors;
      var ctx;

      function loadAll()
      {
        var can = document.getElementById("map");
        ctx = can.getContext("2d");
        can.style.width = (dim*pixel)+"px";
        can.style.height = (dim*pixel)+"px";
        can.width=dim*pixel;
        can.height=dim*pixel;

        colors = new Object();
        for(let i=0;i<5;i++)
        {
          colors[i]="rgb("+(25+i*25)+","+(25+i*25)+",255)"
        }

        for(let i=0;i<5;i++)
        {
          colors[i+5]="rgb("+(255-(i*5))+","+(255-(i*12))+","+(170-(i*20))+")"
        }

        for(let i=0;i<5;i++)
        {
          colors[i+10]="rgb("+(185-(i*24))+","+(218-(i*11))+","+(69-(i*6))+")"
        }

        for(let i=0;i<5;i++)
        {
          colors[i+15]="rgb("+(153+(i*20))+","+125+","+45+")"
        }

        for(let i=0;i<5;i++)
        { 
          colors[i+20]="rgb("+(153+(i*4))+","+(125-(i*18))+","+(45+(i*4))+")"
        }

        for(let i=0;i<5;i++)
        { 
          colors[i+20]="rgb("+(171+(i*4))+","+(34+(i*32))+","+(27+(i*33))+")"
        }

        colors[5]="rgb(150,150,250)";
        clear();
        draw();
      }

      function other()
      {
        clear();
      }

      function clear()
      {
        heights = new Array(dim);
        for(let i=0;i<dim;i++)
        {
          heights[i]=new Array(dim);
          for(let y=0;y<dim;y++)
          {
            heights[i][y]=0;
          }
        }
        draw();
      }

      function seed()
      {
        clear();
        var fill=.01;
        for(let x=0;x<dim;x++)
        {
          for(let y=0;y<dim;y++)
          {
            var r = Math.random();
            if(r>(1-fill))
            {
              heights[x][y]=1;
            }
            else if(r<fill)
            {
              heights[x][y]=-1;
            }
            else
            {
              heights[x][y]=0;
            }
          }
        }

        draw();
      }

      function grow(variability)
      {
        next = new Array(dim);
        for(let x=0;x<dim;x++)
        {
          next[x]=new Array(dim);
          for(let y=0;y<dim;y++)
          {
            next[x][y]=0;
          }
        }

        for(let x=0;x<dim;x++)
        {
          for(let y=0;y<dim;y++)
          {
            if(heights[x][y]==0)
            {
              continue;
            }

            next[x][y]+=heights[x][y];
            var dir=0;

            if(next[x][y]>0)
            {
              next[x][y]+=1;
              dir=1;
            }

            if(next[x][y]<0)
            {
              next[x][y]-=1;
              dir=-.5;
            }

            if(x>0)
            {
              if(y>0 && heights[x-1][y-1]==0 && Math.random()<variability)
              {
                next[x-1][y-1]+=dir;
              }

              if(y<dim-1 && heights[x-1][y+1]==0 && Math.random()<variability)
              {
                next[x-1][y+1]+=dir;
              }

              if(heights[x-1][y]==0 && Math.random()>variability)
              {
                next[x-1][y]+=dir;
              }
            }

            if(x<dim-1)
            {
              if(y>0 && heights[x+1][y-1]==0 && Math.random()<variability)
              {
                next[x+1][y-1]+=dir;
              }

              if(y<dim-1 && heights[x+1][y+1]==0 && Math.random()<variability)
              {
                next[x+1][y+1]+=dir;
              }

              if(heights[x+1][y]==0 && Math.random()>variability)
              {
                next[x+1][y]+=dir;
              }
            }

            if(y>0 && heights[x][y-1]==0 && Math.random()>variability)
            {
              next[x][y-1]+=dir;
            }

            if(y<dim-1 && heights[x][y+1]==0 && Math.random()>variability)
            {
              next[x][y+1]+=dir;
            }

            //maximums
            if(next[x][y]<-5)
            {
              next[x][y]=-5;
            }

            if(next[x][y]>20)
            {
              next[x][y]=20;
            }

            if(next[x][y]!=heights[x][y])
            {
              var a=0;
            }
          }
        }

        heights=next;
      }

      function draw()
      {
        for(let x=0;x<dim;x++)
        {
          for(let y=0;y<dim;y++)
          {
            ctx.fillStyle = colors[heights[x][y]+5];
            ctx.fillRect(x*pixel,y*pixel, pixel, pixel);
          }
        }
      }

      var dragType = 0;

      function drag(e)
      {
        x=e.layerX;
        y=e.layerY;
        output.innerHTML="(x,y): ("+x+", "+y+") Type: "+dragType+" @ "+heights[x][y];
        if(dragType==0)
        {
          return;
        }
        heights[x][y]+=dragType;
      }

      function down(e)
      {
        if(e.button==0)
        {
          dragType=1;
        }
        else
        {
          dragType=-1;
        }
        x=e.layerX;
        y=e.layerY;
        output.innerHTML="(x,y): ("+x+", "+y+") Type: "+dragType+" @ "+heights[x][y];
      }

      function up(e)
      {
        dragType=0;
        x=e.layerX;
        y=e.layerY;
        output.innerHTML="(x,y): ("+x+", "+y+") Type: "+dragType+" @ "+heights[x][y];
        draw();
      }
    </script>
  </head>
  <body onload="loadAll()">
    <button onclick="other()">Clear</button>
    <button onclick="seed()">Seed</button>
    <button onclick="grow(.85); draw();">Grow</button>
    <button onclick="grow(.85)">Grow ONLY</button>
    <button onclick="draw()">Draw</button><br>
    <canvas id="map" onmousemove="drag(event)" onmousedown="down(event)" onmouseup="up(event)"></canvas><br>
    <p id="output"></p>
  </body>
</html>


画布{背景色：黑色；}
var-dim=400；
var像素=1；
变异高度；
变异颜色；
var-ctx；
函数loadAll（）
{
var can=document.getElementById（“map”）；
ctx=can.getContext（“2d”）；
can.style.width=（暗*像素）+“px”；
can.style.height=（暗*像素）+“px”；
can.width=dim*像素；
can.高度=暗*像素；
颜色=新对象（）；

对于（设i=0；i我认为问题在于单词
Clear
。我相信javascript认为单词
Clear
表示关键字或保留字。我尝试将代码中的函数词
Clear
更改为
Cleared
，代码运行良好




画布{背景色：黑色；}
var-dim=400；
var像素=1；
变异高度；
变异颜色；
var-ctx；
函数loadAll（）
{
var can=document.getElementById（“map”）；
ctx=can.getContext（“2d”）；
can.style.width=（暗*像素）+“px”；
can.style.height=（暗*像素）+“px”；
can.width=dim*像素；
can.高度=暗*像素；
颜色=新对象（）；

for（设i=0；i看起来问题在于它调用的是document.clear（）函数，而不是您创建的clear函数

由于您试图从DOM事件访问它，因此它正在调用document.clear（）函数

要解决这个问题，您可以使用window.clear（）或您所在的任何范围来正确调用clear方法

您可以在此处找到更多信息：

我将函数名从clear（）改为clearmap（），现在似乎工作正常


它可能会干扰document.clear（）？
您能否共享某种输出，它是否会引发错误？每个人都很好地解释了一些我应该已经知道的事情，但是@sylens得到了“正确”的答案，因为它是最完整的，并且有一个有用的参考。谢谢。