Javascript Input Value Not Changeable By User

Question

I am relatively new to Javascript and having some trouble with changing values.

Here is my Javascript:

function printResults(results, numMeals){
    calories=Math.round(results);
    protein= Math.round(results/4*.4);
    carbs=Math.round(results/4*.3);
    fats=Math.round(results/9*.3);
    document.getElementById("calories").innerHTML="Total Calories: " + ('<input type="text" id= "totalCal">');
    document.getElementById("totalCal").value=calories;
    document.getElementById("protein").innerHTML="Grams of Protein: " + ('<input type="text" id="totalProtein">');  
    document.getElementById("totalProtein").value=protein;  
    document.getElementById("carbs").innerHTML="Grams of Carbs: " + ('<input type="text" id="totalCarbs">'); 
    document.getElementById("totalCarbs").value=carbs;  
    document.getElementById("fats").innerHTML="Grams of Fat: " + ('<input type="text" id="totalFats">'); 
    document.getElementById("totalFats").value=fats;
    calories= Number(document.getElementById("totalCal").value);
    protein= Number(document.getElementById("totalProtein").value);
    carbs= Number(document.getElementById("totalCarbs").value);
    fats= Number(document.getElementById("totalFats").value);
    document.getElementById("search").innerHTML= ('<a class="btn" href="search/'+calories+'/'+protein+'/'+carbs+'/'+fats+'/'+numMeals+'">Find Meals</a><br>');}

And it edits these html input fields:

    <div class="span2" style="text-align:left">
    <span id="calories"> Total Calories: -</span><br>
    <span id="protein"> Protein: -</span><br>
    <span id="carbs"> Carbs: -</span><br>
    <span id="fats"> Fats: -</span><br>
    <span id="search"></span><br>
    </div>

This works with setting the initial values, however, when I edit the value of the text field manually, it does not change the value upon submission. For example if the original calories are set to 2000 based on the calculations and then I edit the text field to 2500, my search still yields a value of 2000.

As I read your js, the last row of your function sets a link Find meals with the initial search values? Then of course the link won't return the values if changed after? — jtheman
– jtheman, Commented May 4, 2013 at 22:45
Your values in the search innerHTML all depend on the results variable in the printResults function. How do you call that function? You need to call it using your text fields values. — Robin Manoli
– Robin Manoli, Commented May 4, 2013 at 22:55

Andrey Shchekin · Accepted Answer · 2013-05-04 22:47:59Z

1

Yes, instead of changing innerHtml of #search, change it to <a> or <button>, handle click event and get the values in the event. Otherwise you are generating search link earlier than the value is changed, so it includes old values.

Also there is no reason to generate inputs dynamically, define them in html and only change the value as required.

As a side note, I really recommend looking into jQuery as it makes these things much less verbose.

answered May 4, 2013 at 22:47

Andrey Shchekin

21.8k20 gold badges100 silver badges167 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript Input Value Not Changeable By User

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related