javascript - 在 for 循环中从输入区域获取增量值

Question

我已经完成了这项工作fiddle :

HTML

<div id="container">
    <div id="input_container">
        <label for="increment_t">Set t-increment value (default 0.1):</label>
        <input id="increment_t" type="number" min="0" max="1" step="0.1" value="0.1" />
    </div>
    <br />
    <div id="generator_container">
        <a id="downloadlink" download="outfile.txt">Download</a>
        <button id="create_link">Export output</button>
    </div>
</div>

CSS

#container {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    padding: 10px 10px; /* (top-bottom) (left-right) */
    z-index: 1;
}
#input_container {
    display: block;
    float: left;
    margin-bottom: 10px;
}
#increment_t {
    max-width: 50px;
}
#generator_container {
    display: block;
    float: right;
}
#downloadlink {
    display: none;
    margin-right: 10px;
}
#create_link {
    float: right;
}

JavaScript

(function () {
    var t_values;
    var t_values_list = [];
    for ( var t=0; t<=1; t+=0.1 ){
        t_values = t.toFixed(1);
        t_values_list.push(t_values);
    }    

    var textFile = null;
    makeTextFile = function (text) {
        var data = new Blob([text], {type: 'text/plain'});

        if (textFile !== null) {
            window.URL.revokeObjectURL(textFile);
        }

        textFile = window.URL.createObjectURL(data);

        return textFile;
    };

    var create_link = document.getElementById('create_link');

    create_link.addEventListener('click', function () {
        alert(t_values_list);
        var link = document.getElementById('downloadlink');
        link.href = makeTextFile(t_values_list.join('\n'));
        link.style.display = 'inline-block';
    }, false);
})();

但我想为“t”变量设置增量值(即0.1，在for循环中)从输入区域。我试过this方式:

JavaScript

(function () {
    var t_values;
    var t_values_list = [];
    alert(document.getElementById("increment_t").value); // test to get the t value, to use it in the following loop for
    for ( var t=0, increment_t=document.getElementById("increment_t").value; t<=1; t+=increment_t ){
        t_values = t.toFixed(1);
        t_values_list.push(t_values);
    }    

    var textFile = null;
    makeTextFile = function (text) {
        var data = new Blob([text], {type: 'text/plain'});

        if (textFile !== null) {
            window.URL.revokeObjectURL(textFile);
        }

        textFile = window.URL.createObjectURL(data);

        return textFile;
    };

    var create_link = document.getElementById('create_link');

    create_link.addEventListener('click', function () {
        alert(t_values_list);
        var link = document.getElementById('downloadlink');
        link.href = makeTextFile(t_values_list.join('\n'));
        link.style.display = 'inline-block';
    }, false);
})();

但是它不起作用。感谢您的帮助

Answer 1

如果您从 JavaScript 中的其他地方获取数字...始终解析它们。 parseInt(..., 10) 或在您的示例中:parseFloat