Multiply not working

Discussion in 'JavaScript' started by thehen12, Jun 15, 2021.

  1. #1
    I did add to this site, but could not get any answer
    https://forum.freecodecamp.org/t/help-me-with-javascript/61934

    In my first part code I have
    input 1(add amount in here)
    input 2 (leave blank, get info from somewhere else)
    multiply button
    output (input1 * input2) (2*4=8)
    This is working 100%

    in my 2nd part code
    input 1 (leave blank, get info from part 1 output)
    input 2 (any number)
    multiply button
    output (output 1st part * input 2 2nd part ) (2*5=10)
    Cannot get this to work
    part 1 code
    <font color="red"><b><label for="firstNum">CURRENCY:</label></b></font>
    <input type="number" id="firstNum" name="firstNum">
    
    <font color="PURPLE"><b><label for="secondNum">Total </label></b></font>
    <input type="number" id="secondNum" name="secondNum">
    
    <button onclick="multiply()">Multiply</button>
    
    <font color="BLUE"><b><label for="result">Total</label></b></font>
    <input type="text" id="result" name="result"/>
    
    <script>
    function multiply(){
        num1 = document.getElementById("firstNum").value;
        num2 = document.getElementById("secondNum").value = 1154.69514250;
        result = num1 * num2;
        document.getElementById("result").value = result.toLocaleString('en-US');
    }
    </script>
    HTML:
    2nd part code

    <font color="red"><b><label for="usd">leave blank( info from 1 total</label></b></font>
    <input type="usdzar" id="usd" name="usd">
    
    <font color="PURPLE"><b><label for="zar">Put ZAR in</label></b></font>
    <input type="usdzar" id="zar" name="zar">
    
    <button onclick="multiply1()">Multiply</button>
    
    <font color="BLUE"><b><label for="result1">Total</label></b></font>
    <input type="text" id="result1" name="result1"/>
    
    
    <script>
    function multiply1(){
        num3 = document.getElementById("result").value;
        num4 = document.getElementById("zar").value;
        result1 = num3 * num4;
        document.getElementById("result1").value = result.toLocaleString('en-US');
    }
    </script>
    HTML:
     
    thehen12, Jun 15, 2021 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    hi & welcome:)
    look at the 2 last lines of multiply1() function.
    perhaps result should be result1?
     
    hdewantara, Jun 16, 2021 IP
  3. thehen12

    thehen12 Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    No it must get the amount from result
     
    thehen12, Jun 16, 2021 IP
  4. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #4
    with F12, any errors / warning from your browser console?
     
    hdewantara, Jun 16, 2021 IP
  5. thehen12

    thehen12 Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    No errors see screenshot, I want to multiply utput of first line with input of second line[​IMG]
     
    thehen12, Jun 16, 2021 IP
  6. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #6
    Assuming these 2 code blocks are in 1 webpage, I've just tried to put them to a test as follows:
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>title</title>
        </head>
     
        <body>
            <!--1st part-->
            <font color="red"><b><label for="firstNum">CURRENCY:</label></b></font>
            <input type="number" id="firstNum" name="firstNum">
    
            <font color="PURPLE"><b><label for="secondNum">Total </label></b></font>
            <input type="number" id="secondNum" name="secondNum">
    
            <button onclick="multiply()">Multiply</button>
    
            <font color="BLUE"><b><label for="result">Total</label></b></font>
            <input type="text" id="result" name="result"/>
    
            <script>
            function multiply(){
                num1 = document.getElementById("firstNum").value;
                num2 = document.getElementById("secondNum").value = 1154.69514250;
                result = num1 * num2;
                document.getElementById("result").value = result.toLocaleString('en-US');
            }
            </script>
    
            <!--2nd part-->
            <font color="red"><b><label for="usd">leave blank( info from 1 total</label></b></font>
            <input type="usdzar" id="usd" name="usd">
    
            <font color="PURPLE"><b><label for="zar">Put ZAR in</label></b></font>
            <input type="usdzar" id="zar" name="zar">
    
            <button onclick="multiply1()">Multiply</button>
    
            <font color="BLUE"><b><label for="result1">Total</label></b></font>
            <input type="text" id="result1" name="result1"/>
    
    
            <script>
            function multiply1(){
                num3 = document.getElementById("result").value;
                num4 = document.getElementById("zar").value;
                result1 = num3 * num4;
                document.getElementById("result1").value = result.toLocaleString('en-US');
            }
            </script>
        </body>
    </html>
    HTML:
    But my Firefox, Chrome and Edge browsers all give expected result, and no errors too.

    err, your screenshot... that's the expected result, right?
     
    hdewantara, Jun 16, 2021 IP
  7. thehen12

    thehen12 Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #7
    Yes, you can see when doing the second one it does not multiplay 12 by the out put of first one, it gives the same answer and it is wrong, that is what I am trying to get to work
     
    thehen12, Jun 16, 2021 IP
  8. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #8
    okay, let's see if this one page below works on yours.
    the clue is in the 1st line of multiply1() function: javascript needs help to understand commas within numbers:
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>title</title>
        </head>
       
        <body>
            <!--1st part-->
            <font color="red"><b><label for="firstNum">CURRENCY:</label></b></font>
            <input type="number" id="firstNum" name="firstNum">
    
            <font color="PURPLE"><b><label for="secondNum">Total </label></b></font>
            <input type="number" id="secondNum" name="secondNum">
    
            <button type="button" onclick="multiply()">Multiply</button>
    
            <font color="BLUE"><b><label for="result">Total</label></b></font>
            <input type="text" id="result" name="result">
    
            <script>
            function multiply(){
                var num1 = document.getElementById("firstNum").value;
                var num2 = document.getElementById("secondNum").value = 1154.69514250;
                var result = num1 * num2;
                document.getElementById("result").value = result.toLocaleString('en-US');
            }
            </script>
    
            <!--2nd part-->
            <font color="red"><b><label for="usd">leave blank( info from 1 total</label></b></font>
            <input type="usdzar" id="usd" name="usd">
    
            <font color="PURPLE"><b><label for="zar">Put ZAR in</label></b></font>
            <input type="usdzar" id="zar" name="zar">
    
            <button type="button" onclick="multiply1()">Multiply</button>
    
            <font color="BLUE"><b><label for="result1">Total</label></b></font>
            <input type="text" id="result1" name="result1">
    
            <script>
            function multiply1(){
                var num3 = document.getElementById("result").value.replace(/,/g,''); //remove any commas
                var num4 = document.getElementById("zar").value;
                var result1 = num3 * num4;
                document.getElementById("result1").value = result1.toLocaleString('en-US');
            }
            </script>
        </body>
    </html>
    HTML:
     
    hdewantara, Jun 16, 2021 IP
  9. thehen12

    thehen12 Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #9
    Thank you it is working, just last question, can it also be make to show the full amount 1.222.333.659595
     
    thehen12, Jun 16, 2021 IP
  10. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #10
    you're welcome..
    what do you mean with "full amount" ?
     
    hdewantara, Jun 16, 2021 IP
  11. thehen12

    thehen12 Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #11
    if the amount is 1,154.69514250 the output must also be the same 1154.69514250. it only shows now 1,154.695 on first and 2,309.39 on second part instead off 2,309.390285
     
    thehen12, Jun 16, 2021 IP
  12. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #12
    hdewantara, Jun 16, 2021 IP
  13. thehen12

    thehen12 Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #13
    Thank you for all you help on this
     
    thehen12, Jun 16, 2021 IP