Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Daniel Muvdi
Daniel Muvdi
5,262 Points

I can't make this work :(

I have this code on java script that is working perfect.

let price = ;
let stopLoss = ;
let takeProfit = ;
let balance =;
let maxLoss = ;

let win = ((takeProfit-price)/100)*100; 
let lose = ((price-stopLoss)/100)*100;
let totalInvest = ((maxLoss*lose)*balance)/100; 

console.log(totalInvest);

Now i need to make a html form that gets does 5 first values and return is the same page the new 3 values under the form.

i try everything i know but i'm out of ideas please some help :)

K Cleveland
K Cleveland
21,839 Points
K Cleveland
K Cleveland
21,839 Points

Is this part of a challenge? Can you provide the link to the challenge? Thanks!

2 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

So now that I see the HTML, the (plain JavaScript) answer to your original question would be to wrap the code in an event handler, attach that handler to the button, and then access the values of each element to complete the missing parts of the assignments:

document.getElementById("submit_me").addEventListener("click", e => {
  let price = document.getElementById("price").value;
  let stopLoss = document.getElementById("stoploss").value;;
  let takeProfit = document.getElementById("takeprofit").value;;
  let balance = document.getElementById("balance").value;;
  let maxLoss = document.getElementById("max_loss").value;;

  document.getElementById("win").textContent = (takeProfit - price) / 100 * 100;
  document.getElementById("loss").textContent = (price - stopLoss) / 100 * 100;
  document.getElementById("total_invest").textContent = maxLoss * lose * balance / 100;
});

The jQuery version is a bit more concise, and makes sense if you need to load it for bootstrap anyway.

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

I'm not sure how this code could be "working perfect", since the first 5 lines are all missing the right side of the assignment. Each of those lines needs something added to make them complete.

Is there some other code, perhaps some HTML, that goes with this? If this is for a course please provide a link to the course page you are working with.

Daniel Muvdi
Daniel Muvdi
5,262 Points

Well is very obvious that I try it with some numbers before i post it, you could have done it too before answering. also if you read my question is very very obvious again that the user will be giving us does numbers.

But never mind i already did it. you are very clever just letting you know. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Form</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>
        @media(min-width:992px) {
            .container {
                width: 500px !important;
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <form style="margin-top:20px">
            <div class="form-group">
                <label for="text">Balance:</label>
                <input type="text" class="form-control" id="balance" name="balance">
           </div>
            <div class="form-group">
                <label for="text">Precio Actual de la moneda:</label>
                <input type="text" class="form-control" id="price" name="price">
            </div>

            <div class="form-group">
                <label for="text">Stop Loss (Precio en el cual se coloco el stop loss):</label>
                <input type="text" class="form-control" id="stoploss" name="stoploss">
            </div>

            <div class="form-group">
                <label for="text">Take Profit (Precio en el cual se coloco la ganancias):</label>
                <input type="text" class="form-control" id="takeprofit" name="takeprofit">
            </div>

            <div class="form-group">
                <label for="text">Maximo Porcentaje de Perdidas %:</label>
                <input type="text" class="form-control" id="max_loss" name="max_loss">
            </div>

            <button type="button" class="btn btn-default" id="submit_me">Submit</button>
        </form>

    </div>

    <div class="container">
        <br> <br>
        <p> Monto a invertir: <span id="total_invest" style="color:blue;"></span></p>
        <p> Ganancia total podra ser de: <span id="win" style="color:blue;"></span></p>
        <p> Perdida total podra ser de: <span id="loss" style="color:blue;"></span></p>
    </div>




    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function () {

            $("#submit_me").on('click', function () {

                var price = $("#price").val();
                var stoploss = $("#stoploss").val();
                var takeprofit = $("#takeprofit").val();
                var balance = $("#balance").val();
                var max_loss = $("#max_loss").val();
                let totalLoss = ((price - stoploss) / 100) * 100;
                let totalWin = ((takeprofit - price) / 100) * 100;


                let totalInvest = ((max_loss * totalLoss) * balance) / 100;
                $("#total_invest").html(totalInvest);

                let win = (totalInvest * totalWin) / 100;
                $("#win").html(win);

                let loss = ((totalLoss * totalInvest) / 100);
                $("#loss").html(loss);



            });

        });

    </script>

</body>
</html>