Home>

This is a continuation question of "I want to add a comma (amount) in real time".
I want to make the completed javascript as the title of the title.
That means ① ↓

<table>
      <tr>
        <th></th>
        <th>Sqm (㎡)</th>
        <th>tsubo number</th>
        <th>tsubo unit price (yen/tsubo)</th>
        <th>Amount (Yen)</th>
      </tr>
      <tr>
        <td><input type = "text" name = "se01_a" value = ""></td>
        <td><input type = "text" name = "se01_b" value = ""></td>
        <td><span></span></td>
        <td><input type = "text" name = "se01_c" value = ""></td>
        <td><span></span></td>
      </tr>
      <tr>
        <!-Same code as above->
      </tr>
        ・
        ・
        ・
    </table>


Or part 2

<table>
      <tr>
        <th></th>
        <th>Sqm (㎡)</th>
        <th>tsubo number</th>
        <th>tsubo unit price (yen/tsubo)</th>
        <th>Amount (Yen)</th>
      </tr>
      <tr>
        <td><input type = "text" name = "se01_a" value = ""></td>
        <td><input type = "text" name = "se01_b" value = ""></td>
        <td><span></span></td>
        <td><input type = "text" name = "se01_c" value = ""></td>
        <td><span></span></td>
      </tr>
    </table>
    <table>
      <!-Same code as above->
    </table>
        ・
        ・
        ・</Code></pre>
<p><br />
In javascript,</p>
<pre><code data-language = "JavaScript">function price ({se01_b, se01_c}) {
        ・
        ・
        ・
}



"Price" is changed to "price1," "price2," "price3," etc.
"Tsubo" and "kingaku" are also changed to "tsubo1," "tsubo2," "kingaku1," "kingaku2," and so on, resulting in a huge amount of javascript code.
Can you make it compact?

  • Answer # 1

    I don't know how price () is called, but
    For example, if it looks like this:

    <input type = "text" name = "se01_a" value = "" onkeypress = "price ()">


    This way

    <input type = "text" name = "se01_a" value = "" onkeypress = "price (this)">
    function price (element) {
      console.log (element);
    }


    You can get the input itself that operated with onkeypress.
    So

    function price (element) {
      console.log (element.value);
    }


    Then you can take the input value.

    I'd be happy if you got a hint.

    Minimum sample code

    Minimum sample code that displays the result of adding the left and right values ​​in the next field.
    No matter how many sets of forms are added, there is only one function, and the type of information given is different (Element itself and field name)
    You can see that the calculation is done regardless.

    ※ It has been changed to onkeyup instead of onkeypress presented in the first code from the event occurrence level.
    The method name is also changed from price to calc because it is a function that simply calculates.
    * No consideration is given to cases where one of the numbers is not entered or is not a half-width number. Really minimum composition.

    Don't try to apply this to what you're trying to do. Think of it as one of the "Hints/Concepts for Doing One Function". Probably, if you don't understand this idea, what you are trying to do with this question is not feasible.

    <input type = "text" name = "a1" id = "a1" onkeyup = "calc (this, 'b1', 'result1')">+
    <input type = "text" name = "b1" id = "b1" onkeyup = "calc (this, 'a1', 'result1')">=
    <span id = "result1"></span>
    <br />
    <input type = "text" name = "a2" id = "a2" onkeyup = "calc (this, 'b2', 'result2')">+
    <input type = "text" name = "b2" id = "b2" onkeyup = "calc (this, 'a2', 'result2')">=
    <span id = "result2"></span>
    <br />
    <input type = "text" name = "a3" id = "a3" onkeyup = "calc (this, 'b3', 'result3')">+
    <input type = "text" name = "b3" id = "b3" onkeyup = "calc (this, 'a3', 'result3')">=
    <span id = "result3"></span>
    function calc (calc1, calc2, res) {
        var ca1 = parseInt (calc1.value);
        var ca2 = parseInt (document.getElementById (calc2) .value);
        var resField = document.getElementById (res);
        resField.textContent = ca1 + ca2;
    }

    Many people are throwing questions with the code without understanding even if they receive the code that can be used as it is. It's also rude to the person who gave me the code, and it's annoying to say clearly (though this questioner is not, it could be).
    If you don't understand it, don't make it resolved.

    First of all, understand the code of the presented answer properly.
    All codes have meanings one by one, and you must put together meaningful codes.

  • Answer # 2

    Since jun68ykt answered (2018/09/02 19:59) on the page where you would like to add a comma (amount) in real time, we will stop accepting responses.
    Thank you for answering.