javascript - 动态Javascript Div

Question

让 JS Fiddle 工作 http://jsfiddle.net/pskjxofo/

附件我有以下函数，其目的是执行基本计算。我还添加了一个功能，可以添加更多框进行计算。我目前所困惑的是如何告诉 Javascript 制作动态 div，以及如何告诉它在每次单击“计算”时对每一行执行相同的计算。对此提供帮助将不胜感激。谢谢大家。

<div id="redo">
2 X 
<input type="text" id="initial">
= <input type="text" id="solved">
<input type="submit" value="Calculate" onclick="calculait()">
<input type="submit" value="Add Another Box" onclick="addmore()">
</div>
<div id="main"></div>

<script type="text/javascript">
function calculait(){
var first = document.getElementById('initial');
var second = document.getElementById('solved');
second.value = first.value * 2;
}
function addmore(){
var bar = document.getElementById('main');
bar.innerHTML = bar.innerHTML + "<div id='redo'>2 X 
<input type='text'   id='initial'> = <input type='text' id='solved'> 
<input type='submit' value='Calculate' onclick='calculait()'   
<input type='submit' value='Add Another Box' onclick='addmore()";
}
</script>

Answer 1

这是实现此目的的众多方法之一。您可以拥有以下 HTML 结构:

<div id="main">
    <div class="operation">
        2 X <input type="text" class="initial"/>=
        <input type="text" class="solved"/>
    </div>
</div>

<input type="submit" value="Calculate" onclick="calculait()"/>
<input type="submit" value="Add Another Box" onclick="addmore()"/>

还有这个 JS:

// Main container for all operations
var main = document.getElementById('main');
// Piece of HTML you'll be duplicating
var op = document.getElementsByClassName('operation')[0].outerHTML;

function calculait() {
    // Get every operation div
    var operations = document.getElementsByClassName('operation');
    // For each of them, calculate
    for(var i=0, l=operations.length; i<l; i++){
        operations[i].getElementsByClassName('solved')[0].value =
            parseFloat(operations[i].getElementsByClassName('initial')[0].value) * 2;
    }
}

function addmore() {
    main.insertAdjacentHTML('beforeend',op);
}

JS Fiddle Demo