从for循环中的输入区域获取增量值

时间:2015-03-25 23:33:48

标签: javascript for-loop input increment

我完成了这项工作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);
})();

但我想为&#34; t&#34;设置增量值。变量(即 0.1 ,在 for-loop 中)从输入区域取出它。我尝试了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);
})();

但它没有用。谢谢你的帮助

1 个答案:

答案 0 :(得分:1)

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