Home>

I use javascript (not jQuery) to display the calculated value in real time when filling in the form.

function price () {
        var se01_b = document.getElementById ('se01_b'). value;
        var se01_c = document.getElementById ('se01_c'). value;
        var tsubo = parseInt (se01_b) * 0.3025;
        var kingaku = parseInt (se01_b) * 0.3025 * parseInt (se01_c);
        if (isNaN (tsubo)) {
          var tsubo = "";
        }
        if (isNaN (kingaku)) {
          var kingaku = "";
        }
        document.getElementById ('tsubo'). innerHTML = tsubo;
        document.getElementById ('kingaku'). innerHTML = kingaku;
      }


If i move it with the above code, it will be as intended, and even if I want to add a comma to the finish, you can't add a comma in real time.
What kind of code should I use for the commas?

By the way, it is "kingaku" that puts a comma.
If possible, it is "se01_c" in the form.

  • Answer # 1

    Hello.

    In order to make the display of

    kingakucomma separated, how about using Number.prototype.toLocaleString () like below? (* Includes processing to use empty string when NaN is used with ternary operator)

    document.getElementById ('kingaku'). innerHTML = isNaN (kingaku)? "": kingaku.toLocaleString ('ja-JP');

    Sample: https://jsfiddle.net/jun68ykt/m248kL0c/24/

    A comment that reflects your point: https://jsfiddle.net/jun68ykt/m248kL0c/112/


    Append

    The following was created using the table.

    https://jsfiddle.net/jun68ykt/p2uj40xn/37/

    Here is a supplementary explanation.

    Based on the numbers

    0.3025and the variable nametsubo, we interpreted the unit of square meters to be converted to square meters.

    ・ Also, the amount was calculated withkingaku = tsubo * se01_c, andsec01_cwas interpreted as a unit price.

    -Added table header<th>according to the above interpretation.

    -The input event handler is set for the input event in the JavaScript code.

    ・ Entering the number of square meters<input>accepts a decimal point (period), but there are two decimal points like50.85.And the background will be red based on an invalid input.

    -Below is an input/display example. (* The unit price entered is the number obtained by checking the rent price of rental properties in Minato-ku, Tokyo at the time of writing on the Sakai site.)


    I'm glad if you can use it as a reference.


    Appendix 2

    If there are multiple data lines: https://jsfiddle.net/jun68ykt/p2uj40xn/43/