英文:

Trying to use value in number field1 to display in readonly div2

问题

I'm converting a Google Sheets that collects several data inputs from the user and then does a lot of calculations. I now have to convert it to a webpage and tie it to an SQL database.

I'm using jquery to manipulate the calculable data on the web page, and I'm good with SQL.

I worked with Javascript years ago and am a little rusty. I need a little jump start.

I have created a table of 5 rows that captures the square feet (SF) of three space types.

Space Type is a drop-down.
Floor Area is an type = number field (user entry).
% Area is calculated (Floor Area ÷ Total Area).

If it's a number field, should I use $("#floor-area-1").val()/$("#total-area").val()?

Could I use the .text() as someone has suggested?

I should be able to populate the DIVs innerHTML with the results of the calculations, e.g., $("#floor-area-1").val()/$("#total-area").val().

The rest are DIVs, and the calculation will show in their respective column.

% Area will calculate the respective space's floor area are shown in that row's cell.

kWh Used will use a value associated with a Space Type and multiply that by the Floor Area, e.g., Office = 21 kWh x 20,000 SF will show 420,000 kWh used in the cell under kWh Used in row 1.

I've used document.getElementById() in the past. However, the syntax is a bit different with jquery. I'm good with reference material that shows examples. So if someone knows of an online source, please point me to it, and I should be able to work my way through this.

My question is, how do I capture the text in Space Type and Floor Area and show the results of the % Area? If I can understand that, I can probably figure the rest out.

-----------+------------+--------+----------+----------
Space Type | Floor Area | % Area | kWh Used | kWh Cost 
-----------+------------+--------+----------+----------
Office     |  20,000    |   12%  |   50,000 |  $5,000  
-----------+------------+--------+----------+----------
Hotel      |  150,000   |   87%  |  120,000 | $12,000
-----------+------------+--------+----------+----------
Retail     |  2,000     |    1%  |   19,000 |  $1,900
-----------+------------+--------+----------+----------
Total                   |  100%  |  241,000 | $18,900
-----------+------------+--------+----------+----------

Testing the following code isn't calling the alert() function.<br>

$( "#floor-area-1" ).on( "blur", function() {
alert( "Handler for blur called." );
} );

<details>
<summary>英文:</summary>

I&#39;m converting a Google Sheets that collects several data inputs from the user and then does a lot of calculations. I now have to convert it to a webpage and tie it to an SQL database.

I&#39;m using jquery to manipulate the calculable data on the web page, and I&#39;m good with SQL.

I worked with Javascript years ago and am a little rusty.  I need a little jump start.

I have created a table of 5 rows that captures the square feet (SF) of three space types.

&lt;b&gt;Space Type&lt;/b&gt; is a drop-down&lt;br&gt;
&lt;b&gt;Floor Area&lt;/b&gt; is an ```&lt;input&gt;``` type = number field (user entry).&lt;br&gt;
&lt;b&gt;% Area&lt;/b&gt; is calculated (Floor Area &#247; Total Area). 

If it&#39;s a number field, should I use``` $(&quot;#floor-area-1&quot;).val()/$(&quot;#total-area&quot;).val()```?

Could I use the .text() as someone has suggested?

I should be able to populate the DIVs innerHTML with the rersults of the calculations, e.g., ``` $(&quot;#floor-area-1&quot;).val()/$(&quot;#total-area&quot;).val()```.

The rest are DIVs, and the calculation will show in their respective column.

<!-- Row 1 -->
<div class="div-table-row">
<div class="div-table-col" style="width:15%;">
<select id="space-type-1" name="space-type-1">
<option value="Education"> Education </option>
<option value="Food sales"> Food sales </option>
<option value="Food service"> Food service </option>
<option value="Health care"> Health care </option>
<option value="Inpatient"> Inpatient </option>
<option value="Outpatient"> Outpatient </option>
<option value="Lodging"> Lodging </option>
<option value="Mercantile"> Mercantile </option>
<option value="Retail-1"> Retail <span style="font-size:8px;">(no mall)</span> </option>
<option value="Retail-2"> Retail <span style="font-size:8px;">(malls)</span> </option>
<option value="Office"> Office </option>
<option value="Public assembly"> Public assembly </option>
<option value="Public safety"> Public safety </option>
<option value="Religious worship"> Religious worship </option>
<option value="Service"> Service </option>
<option value="Storage"> Storage </option>
<option value="Warehouse"> Warehouse </option>
<option value="Other"> Other </option>
<option value="Vacant"> Vacant </option>
</select>
</div>
<div class="div-table-col div-table-col-disp" style="width:13%;">
<input class="input-floor-area" type="number" name="floor-area-1" size="13">
</div>
<div id="kwh-used" class="div-table-col div-table-col-calc"
style="width:10%;border-right-color: #000;">
</div>
<div id="kwh-cost" class="div-table-col div-table-col-calc" style="width:15%;border-right-color: #000;">
</div>
</div>

<b>% Area</b> will calculate the respective space's floor area are shown in that row's cell.

<b>kWh Used</b> will use a value associated with a <b>Space Type</b> and multiply that by the <b>Floor Area</b>, e.g., Office = 21 kWh x 20,000 SF will show 420,000 kWh used in the cell under kWh Used in row 1.

I've used <b>document.getElementById()</b> in the past. However, the syntax is a bit different with jquery.  I'm good with reference material that shows examples.  So if someone knows of an online source, please point me to it, and I should be able to work my way through this.

My question is, how do I capture the text in <b>Space Type</b> and <b>Floor Area</b> and show the results of the <b>%Area</b>?  If I can understand that, I can probably figure the rest out.

-----------+------------+--------+----------+----------
Space Type | Floor Area | % Area | kWh Used | kWh Cost
-----------+------------+--------+----------+----------
Office | 20,000 | 12% | 50,000 | $5,000
-----------+------------+--------+----------+----------
Hotel | 150,000 | 87% | 120,000 | $12,000
-----------+------------+--------+----------+----------
Retail | 2,000 | 1% | 19,000 | $1,900
-----------+------------+--------+----------+----------
Total | 100% | 241,000 | $18,900
-----------+------------+--------+----------+----------

Testing the following code isn't calling the alert() function.<br>

    $( "#floor-area-1" ).on( "blur", function() {
       alert( "Handler for `blur` called." );
    } );

答案1

得分: 0

如果没有提供代码，我只能给你一个基本的使用方法。如果你只是想捕获 div 元素本身的文本，你可以使用 jQuery 中的 .text() 方法来获取和设置。所以你应该能够提取文本，进行计算，然后在之后应用。

英文:

With no code provided I can only give you a basic method to use. If you're just trying to capture the text of the div elements themselves you can use .text() in jquery to get and set. So you should be able to pull the text out and do your calculations and apply it thereafter.

https://api.jquery.com/text/