Mandelbrot, html variable to javascript

MarkE正确地使用了JS中的事件，但代码中也有一个错误，希望我能在下面解决。对于分形，您可能想要设置中心复数，并通过缩放计算出最小值和最大值。

您有一个复数的输入，但这需要一些字符串解析来分离组件，所以我将它们分离为实部和虚部的输入。（我也放大了一下。）我不确定你打算如何处理表格提交——在我看来，你可能不想要表格，因为你不想每次都提交任何东西。

有人可能应该清理一下以获得更完整的答案，我建议使用JQuery而不是getElementByID（区分大小写）。

至少以下代码有效：

<h1>Mandelbrot fraktál</h1>
    <form>c:
        <input id="recid" type="text" name="Re(c)" value=-0.5>
        <input id="imcid" type="text" name="Im(c)" value=0.0>
        <input id="zoom" type="text" name="zoom" value=1.5>
        <input type="submit" value="Submit">
    </form>
    <!-- A vászon kijelölése, méretezése -->
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
// === Mandelbrot objektum létrehozása
var mandelbrot = {
    // === Osztályváltozók
    ///document.getelementById("cid");
    maxiter: 32, // iterációk száma
    xmin: -2.0,
    xmax: 1.0, // valós rész 
    ymin: -1.5,
    ymax: 1.5, // képzetes rész
    zoom: 1.5,
    // === Komplex szám eleme-e a Mandelbrot halmaznak?
    mandelcolor: function (c, b) {
        // a: valós rész, b: képzetes rész
        var z = [c, b];
        var i = 0;
        // A következő sorozatelem kiszámítása
        while (i < this.maxiter && z[0] * z[0] + z[1] * z[1] <= 4.0) {
            // Új elem = Z négyzete + kiinduló érték
            var aa = z[0] * z[0] - z[1] * z[1] + c;
            var bb = 2 * z[0] * z[1] + b;
            z[0] = aa;
            z[1] = bb;
            i++;
        }
        // Visszatérési érték a pixel színkódja
        return '#' + i.toString(16) + i.toString(16) + i.toString(16);
    },
    // === Mandelbrot fraktál rajzolása soronként
    fraktal: function () {
        //console.log(document.getElementById("recid").innerHTML);
        this.zoom = parseFloat(document.getElementById("zoom").value);
        this.xmin = parseFloat(document.getElementById("recid").value) - this.zoom;
        this.ymin = parseFloat(document.getElementById("imcid").value) - this.zoom;
        this.xmax = parseFloat(document.getElementById("recid").value) + this.zoom;
        this.ymax = parseFloat(document.getElementById("imcid").value) + this.zoom;
        for (var y = 0; y < context.canvas.height; y++) {
            // A vizsgált komplex szám képzetes részének
            // leképezése az Y koordináta alapján 
            var zy = this.ymin + (this.ymax - this.ymin) * y / context.canvas.height;
            for (var x = 0; x < context.canvas.width; x++) {
                // A vizsgált komplex szám valós részének leképezése
                // az X koordináta alapján
                var zx = this.xmin + (this.xmax - this.xmin) * x / context.canvas.width;
                context.fillStyle = this.mandelcolor(zx, zy);
                context.fillRect(x, y, 1, 1);
            }
        }
    }
};
// === Globális változók deklarálása
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
mandelbrot.fraktal();
</script>

给用户2个输入type=range元素来选择它们的min&最大值。

<input type=range id=minValue min=0 max=100 value=25>
<input type=range id=maxValue min=0 max=100 value=75>

然后每当用户使用.change:更改值时读取这些值

var minValue=document.getElementById("minValue");
var maxValue=document.getElementById("maxValue");
minValue.addEventListener('change',function(){ 
    var value=minValue.value;
    ...do stuff with the value
});

maxValue.addEventListener('change',function(){ 
    var value=maxValue.value;
    ...do stuff with the value
});