Dynamic Javascript Div

Question

Got JS Fiddle to work http://jsfiddle.net/pskjxofo/

Attached I have the following function, the purpose of which is to perform basic calculation. I also added a feature for adding more boxes for calculation. What I am currently stuck on is how to tell Javascript to make dynamic divs, and how to tell it to perform the same calculations for each line every time I click on Calculate. Assistance on this would be greatly appreciated. Thank you all in advance.

<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>

What's a dynamic div? And it sounds like you need to use this. — Waxi
– Waxi, Commented Feb 5, 2015 at 20:17
I think he means a div which has changing content, i.e. where the resolved calculations text would appear. — Fallenreaper
– Fallenreaper, Commented Feb 5, 2015 at 20:19
@Fallenreaper not necessarily. I have just only thought of doing this in JS right now. Also, I have been trying to put this in JS Fiddle, but for whatever reason I can't get the code to fire there. So apologies for the inconvenience. — Jason Chen
– Jason Chen, Commented Feb 5, 2015 at 20:23
On the last line, you add elements with the same IDs. That won't work, an ID must be unique, use classes instead. And the 2 inputs you are trying to insert are not even closed. For it to work in JS Fiddle, change the onLoad dropdown to No wrap, in <body>. Also, using innerHTML will empty all your previously filled inputs. Use insertAdjacentHTML instead. See this — blex
– blex, Commented Feb 5, 2015 at 20:24

blex · Accepted Answer · 2015-02-05 20:47:32Z

Here is one of the many ways to do it. You could have this HTML structure:

<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()"/>

And this 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

Everton Lenger · Accepted Answer · 2015-02-05 20:47:46Z

If I understood correctly, I think this code will help.

First of all, change your ids for classes (IDs must be always unique in the page).

<input type="text" class="initial">
<input type="text" class="solved">

And in the JS, you use a for to iterate for this elements.

function calculait() {
    var initial = document.getElementsByClassName('initial');
    var solved = document.getElementsByClassName('solved');

    for (var i = 0; i < initial.length; i++) {
        solved[i].value = initial[i].value * 2;
    }
}

function addmore() {
    var bar = document.getElementById('main');

    var html = "<div>2 X ";
    html += "<input type='text' class='initial'> = ";
    html += "<input type='text' class='solved'>";
    html += "</div>";

    bar.innerHTML = bar.innerHTML + html;
}

JSFiddle: http://jsfiddle.net/pskjxofo/2/

Give it a try and let me know if it helps!

Denys Séguret · Accepted Answer · 2015-02-06 07:13:48Z

When you write JavaScript use a debugger, your code didn't parse. You can find one in your browser by hitting F12.

Don't repeat yourself. A clean solution is to put html to duplicate into a template or similar and call a function to copy it.

Use input type=number for numbers.

<html>
<meta charset="utf-8">
<template id="calculate_template">
    <form id="" class="calculate_form">
        <input value="2" type="number" name="initial_1">  X 
        <input type="number" name="initial_2">    =   
        <input type="number" name="solved" disabled="disabled" >
    </form>
</template>

<div id="main">
    <button onclick="addmore();">Add Another Box</button>
    <button onclick="calculate();">Calculate</button>
</div>

<script type="text/javascript">
function calculate(){
    /*Calculates all*/
    var forms = document.getElementsByClassName('calculate_form'),
        i,
        length = forms.length;
    for(i = 0; i < length; i++){
        console.log(forms[i]);
        forms[i]['solved'].value = forms[i]['initial_1'].value * forms[i]['initial_2'].value;
    }
}
function addmore(){
    var main = document.getElementById('main');
    main.insertAdjacentHTML("beforeend", document.getElementById('calculate_template').innerHTML);
}

addmore();
</script>
</html>

Demonstration

ctwheels · Accepted Answer · 2015-02-05 20:51:16Z

Here's a way of doing it:

var counter = 0;

function calculait(calculationId) {
    var first = document.getElementById('initial' + calculationId);
    var second = document.getElementById('solved' + calculationId);
    second.value = first.value * 2;
}

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

<div id="main"><div id="redo0">2 X <input type="text" id="initial0" /> = <input type="text" id="solved0" /><input type="button" value="Calculate" onclick="calculait(0)" /><input type="button" value="Add Another Box" onclick="addmore(0)" /></div>
</div>

maxbeaudoin · Accepted Answer · 2015-02-05 20:55:44Z

HTML

<p id="operations"></p>
<p>
    <input type="submit" value="Calculate" onclick="calc()" />
    <input type="submit" value="Add operation" onclick="addOp()" />
</p>

Javascript

var id = 0, multiplier = 2;
var operations = document.getElementById('operations');

function addOp() {
    ++id;
    var p = document.createElement("p");
    var right = document.createElement("input");
    right.id = 'right_' + id;
    right.type = 'text';
    var result = document.createElement('input');
    result.id = 'result_' + id;
    right.type = 'text';

    p.innerHTML = multiplier + ' x ';
    p.appendChild(right);
    p.innerHTML += ' = ';
    p.appendChild(result);
    operations.appendChild(p);    
}

function calc() {
    for(var i = 1; i <= id; i++) {
        var right = document.getElementById('right_' + i);
        var result = document.getElementById('result_' + i);
        result.value = multiplier * right.value;
    }
}

addOp();

JSFiddle : http://jsfiddle.net/0Lcg0pyz/

Collectives™ on Stack Overflow

Dynamic Javascript Div

5 Answers 5

JS Fiddle Demo

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related