0

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>
asked Feb 5, 2015 at 20:16
6
  • 1
    What's a dynamic div? And it sounds like you need to use this. Commented Feb 5, 2015 at 20:17
  • 1
    I think he means a div which has changing content, i.e. where the resolved calculations text would appear. Commented Feb 5, 2015 at 20:19
  • 1
    @Jason are you limited to pure javascript? Commented Feb 5, 2015 at 20:20
  • @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. Commented Feb 5, 2015 at 20:23
  • 1
    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 Commented Feb 5, 2015 at 20:24

5 Answers 5

2

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

answered Feb 5, 2015 at 20:47
Sign up to request clarification or add additional context in comments.

Comments

1

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!

answered Feb 5, 2015 at 20:47

Comments

1

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

Denys Séguret
384k90 gold badges813 silver badges780 bronze badges
answered Feb 5, 2015 at 21:52

Comments

0

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>

answered Feb 5, 2015 at 20:51

Comments

0

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/

answered Feb 5, 2015 at 20:55

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.