Why are my variables not being stored correctly/not working in my equation?

Question

I'm trying to get the user input, store them into variables and use those variables to run them through an equation to achieve the answer I'm looking for. However, when I hit submit, the equation isn't working as intended. It also seems like my variables aren't being stored right. Any advice would be appreciated.

/* write the submit function for numbers to start computing */
  function submit() {
    /* declare variables */
    var years = document.getElementById("contract_years_input").value;
    var salary = document.getElementById("salary_amount_input").value;
    var record = document.getElementById("team_record_input").value;
    var player_name = document.getElementById("player_name_input").value;

  /* write the equation to calculate the likeliness to sign */
    var likeliness_to_sign = (years * Math.floor(Math.random() * 1.6) + 1.4) + (salary * Math.floor(Math.random() * 2.5) + 2.0) + (record * Math.floor(Math.random() * 1.2) + 1);

    document.getElementById("likeliness_final_number").innerHTML = likeliness_to_sign.toFixed(2);

  /* echo players name */
    document.getElementById("player_name_echo").innerHTML = player_name;

  /* write if else statement for card background color and phrase */
    if (likeliness_to_sign >= 80) {
      document.getElementById("main_card").style.backgroundColor = "#4CBB17";
      document.getElementById("card_text_summary").innerHTML = "There is a high probability this player will sign for this team.";
    } else if (likeliness_to_sign >= 50) {
      document.getElementById("main_card").style.backgroundColor = "#F4D03F";
      document.getElementById("card_text_summary").innerHTML = "There is a moderate probability this player will sign for this team.";
    } else {
      document.getElementById("main_card").style.backgroundColor = "#C0392B";
      document.getElementById("card_text_summary").innerHTML = "There is a very low probability this player will sign for this team.";
    }
  }

<!-- heading of the application -->
<h1 class="dynasty_heading text-center">Dynasty Free Agency Calculator</h1>
<!-- left column for number inputs (contract years, salary amount, team record) and submit button -->
<div class="row">
    <div class="col-lg-6 col-sm-12 contract_section">
      <h3 class="contract_details_sub_headline">Enter the contract details below</h3>
       <!-- player name -->
       <div class="mb-3 player_name">
        <label for="player_name" class="player_name_label">Player Name</label>
        <div>
          <textarea class="player_name_input" id="player_name_input" rows="1"></textarea>
        </div>
      </div>
      <!-- contract years -->
      <div class="mb-3 contract_years">
        <label for="contract_years" class="contract_years_label">Contract Years</label>
        <div>
          <textarea class="contract_years_input" id="contract_years_input" rows="2"></textarea>
        </div>
      </div>
      <!-- salary amount -->
      <div class="mb-3 salary_amount">
        <label for="salary_amount" class="salary_amount_label">Salary Amount</label>
        <div>
          <textarea class="salary_amount_input" id="salary_amount_input" rows="2"></textarea>
        </div>
      </div>
      <!-- team record -->
      <div class="mb-3 team_record">
        <label for="team_record" class="team_record_label">Team Record</label>
        <div>
          <textarea class="team_record_input" id="team_record_input" rows="2"></textarea>
        </div>
      </div>
      <!-- submit button -->
      <button onclick="submit();" type="button" class="btn btn-success">Submit</button>
    </div>

<!-- right column for final output, what the odds are the player will sign -->
    <div class="col-lg-6 col-sm-12 likeliness_section">
      <h3 class="contract_details_sub_headline">Likeliness to sign</h3>
      <div class="card text-center" id="main_card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title" id="likeliness_final_number"></h5>
          <h6 class="card-subtitle mb-2" id="player_name_echo"></h6>
          <p class="card-text" id="card_text_summary"></p>
        </div>
      </div>
    </div>
</div>

What indicates the equation isn't working correctly? Can you provide a description of what the equation should do, and some examples where the form's results deviates from what you would expect? — Gershom Maes, May 25 '21 at 12:30
The value of `textarea` elements are strings, even if the user types in number characters. You need to [convert strings to numbers](https://stackoverflow.com/questions/1133770/how-to-convert-a-string-to-an-integer-in-javascript) before using them to do math. — Sean, May 25 '21 at 12:39

score 0 · Accepted Answer · answered May 25 '21 at 17:06

0

Thank you guys for getting back to me, I was able to figure it out. Because I was taking the value of the inputs, it was coming back through the equation as a string. I added parseFloat() and it worked as intended.

answered May 25 '21 at 17:06

TCani

21
2

score -1 · Answer 2 · answered May 25 '21 at 14:32

For me there is no problem. I can advise you to replace in your submit () function the var by the let. This will mean that the variables will only be kept for the duration of the execution of your function. If you don't get the same result each time it's related to Math.random () You can then fix them when the page loads This would give for the javascript file:

var random_1 = Math.random()
    var random_2 = Math.random()
    var random_3 = Math.random()

    /* write the submit function for numbers to start computing */
    function submit() {
        /* declare variables */
        let years = document.getElementById("contract_years_input").value;
        let salary = document.getElementById("salary_amount_input").value;
        let record = document.getElementById("team_record_input").value;
        let player_name = document.getElementById("player_name_input").value;

        console.log(years, salary, record, player_name)

        /* write the equation to calculate the likeliness to sign */
        let likeliness_to_sign = (years * Math.floor(random_1 * 1.6) + 1.4) + (salary * Math.floor(random_2 * 2.5) + 2.0) + (record * Math.floor(random_2 * 1.2) + 1);

        console.log(likeliness_to_sign)

        document.getElementById("likeliness_final_number").innerHTML = likeliness_to_sign.toFixed(2);

        /* echo players name */
        document.getElementById("player_name_echo").innerHTML = player_name;

        /* write if else statement for card background color and phrase */
        if (likeliness_to_sign >= 80) {
            document.getElementById("main_card").style.backgroundColor = "#4CBB17";
            document.getElementById("card_text_summary").innerHTML = "There is a high probability this player will sign for this team.";
        } else if (likeliness_to_sign >= 50) {
            document.getElementById("main_card").style.backgroundColor = "#F4D03F";
            document.getElementById("card_text_summary").innerHTML = "There is a moderate probability this player will sign for this team.";
        } else {
            document.getElementById("main_card").style.backgroundColor = "#C0392B";
            document.getElementById("card_text_summary").innerHTML = "There is a very low probability this player will sign for this team.";
        }
    }

Why are my variables not being stored correctly/not working in my equation?

2 Answers2