时间戳

首页 > 解决方案 > 当值被硬编码时代码可以工作，但是当它从带有 getElementByID("x") 的 DOM 中获取时不工作

javascript - 当值被硬编码时代码可以工作，但是当它从带有 getElementByID("x") 的 DOM 中获取时不工作

问题描述

所以这是我遇到问题的函数，它使用的是p5.js库。

function SprayCanTool(){

    this.name = "sprayCanTool";
    this.icon = "assets/sprayCan.jpg";

     var spread ;
     var points = 13 ;


    this.draw = function(){
        var r = random(5,10);
        spread =  document.getElementById("size-slider").value;
        if(mouseIsPressed){


            for(var i = 0; i < points; i++){
                point(random(mouseX-spread, mouseX + spread),random(mouseY-spread, mouseY+spread));
            }
        }


    };

    this.populateOptions = function(){
        select(".options").html( " <label>Size of Spray: </label> <input id='size-slider' type='range' min='10' max='200' step='1' value='10'> ");
    }
}

如上所示，代码不起作用，我无法调整喷雾的大小，喷雾根本不会显示在画布上。

如上所示，spread 的最小值可以是 10。当我添加console.log(spread,points)到 draw 方法中时，预期10,13的输出到控制台中。当我将值硬编码为任意数字并删除该spread = document.getElementById("size-slider").value;部分时，代码会按照我的预期工作（当然，我无法使用滑块调整大小）

有谁知道是什么导致了这个问题？

标签： javascriptprocessingp5.js

解决方案

好吧，没关系，我的谜题现在已经解开了。我找错地方了，我得到了错误，因为我试图用浮点数添加整数，并且由于某种原因使用 javascript 将它们加在一起，就像它们都是字符串一样。

我设法通过替换来解决我的问题：

 point(random(mouseX-spread, mouseX + spread),random(mouseY-spread, mouseY+spread));

和

 point(random(int(mouseX)-int(spread), int(mouseX) + int(spread)),random(int(mouseY)-int(spread), int(mouseY)+int(spread)))

推荐阅读