Create Variables across tables in HTML capable of doing math

Question

Im trying to create an HTML table (open to other options) capable of doing math across an editable table. This is the code that Ive been working with but Im not sure how to accomplish the task.

    <body>
    <table border="1">
      <tr>
        <th colspan="2">Numbers</th>
      </tr>
      <tr>
        <td>Paper</td>
        <td><div contenteditable>24</td></div>
      </tr>
      <tr>
        <td>Bits</td>
        <td><div contenteditable>0.20</td></div>
      <tr>
     <td>Resale Value</td>
     <td><div contenteditable>2.49</td></div>
      </tr>
      <tr>
     <td>Weekly Change</td>
     <td><div>Profit Totals</td></div>
      </tr>
    </table>
    <button type="button">Continue</button>
    <p id="Math"></p>

    <script>
    var Test = 5+5;
    document.getElementById("Math").innerHTML = Test; 
    </script>
    </body>

What I need to happen seems to be complex, Ive wrote it down on paper, done the math and wrote down equations but have 0 idea how to input into the code.

These are the equations in order of how they should be performed. 1. 40(paper) * X = Y

X*Y=R
100/A=B
B/X=C
C*S=F
F-R=Z
Z*50(sales per week)=D

VARIABLE MEANINGS

X= Paper (See first table column)

Y= Bits when multiplied by paper

R= Bits value resold

A= Bits value in cents (See second table column)

B= Bits before multiplied by paper

C= Number of paper

S= Resale value of paper (If paper is usually worth $2 but I sell it for $1.5 with changing price as fit)

Z= Total change between F and R

D= Weekly Profits

I want to be able to enter my own values (ex, where it says 24 I want to be able to type 17 and the equation follow suit and show me the result once I hit the "continue" button). I want the math to display the final weekly profits gained in the 4th table named "Weekly Change." I understand this seems confusing but I would appreciate any help offered on this as I do not know very much HTML.

Note, the tag was for testing to see how variables worked with a simple equation on its own (5+5) but has no purpose yet. Same goes with the continue button and does not currently do anything.

Please ask me if I need to explain anything, lots of variables and math Im happy to further detail if needed.

Thanks!!

Welcome to SO. Please visti the [help] to see what and how to ask. Your question belongs on e-lance or similar. — mplungjan, Jul 26 '15 at 05:44
@mplungjan Thank you. Im not sure how my question violates any of the guidelines though that would require me to go to an elance site. It states about halfway down "Ask about... Specific programming problems Software algorithms Coding techniques Software development tools" "Don't ask about... Questions you haven't tried to find an answer for (show your work!) Product or service recommendations or comparisons Requests for lists of things, polls, opinions, discussions, etc. Anything not directly related to writing computer programs" Just asking for Techniques and Algorithms. Thanks! — koosh dadi, Jul 26 '15 at 06:24
Your question does not show what you tried code wise. You could start by finding any of the millions of examples of how to calculate something — mplungjan, Jul 26 '15 at 06:50
@RamRaider2 The initial data is from typing it within the code, but the table IS editable. See line 5,9, and 12. The current numbers are just base place holders. — koosh dadi, Jul 26 '15 at 07:11
@mplungjan thank you for your help, though I cant agree. I have viewed others but cannot find something related to what Im attempting to do. Any pointers would be greatly appreciated, I detailed my question pretty thoroughly I can see how it is complicated though. Any help is very much appreciated:) — koosh dadi, Jul 26 '15 at 07:13
I searched for calculate contenteditable and found this http://stackoverflow.com/questions/12097230/calculating-the-sum-of-numbers-in-contenteditable-text-using-jquery — mplungjan, Jul 26 '15 at 11:03

score 0 · Answer 1 · edited Oct 09 '19 at 22:59

So the short answer is you are going to have to create a input box inside of your table

<tr>
<th> Paper </th> 
<th> <input type="number" id="Paper_Value"> </th>
</tr>

<input type="button" onclick="myfunction()">

<script> 
   myfunction(){

}

There are a couple of different ways of going about it but you are going to need some

document.getElementById("insert ID here").innerhtml

to replace some of the inner html in your other sections.

And

document.getElementById("insert ID here").value

to obtain your paper value.

The key is to make sure that you obtain the value in a script and replace the inner html of the other sections of your table by doing the math in the script. As long as you do not set the page to reload hypothetically you should be good to go.

Practice with some basic addition first

<table>
<tr> 
<th> First Number </th>
<th> <input type="number" id="number_one"></th>
</tr>
<tr>
<th> Second Number </th>
<th> <input type="number" id="number_two"></th>
</tr> 
<tr>
<th> First + Second </th>
<th> <p id="answer">Answer is....</p></th>
</tr>
</table>
<input type="button" onclick="myFunction()">

<script>
myFunction(){
Insert Math Here
}

the trick afterwards is formatting your number for two decimal places depending on if you are going to use a float or a strict integer for your mathematical process — Alex Carlson, Oct 09 '19 at 22:36

Create Variables across tables in HTML capable of doing math

VARIABLE MEANINGS

1 Answers1