Javascript glitch updating value of input

Question

I am working on an HTML page that uses Morris.js to create charts. I added calendar widgets to allow the user to choose a start and an end date, and a button to update the data. I realized it would be convenient if I automatically set the dates to "today" so the charts already have data when first loaded. Everything is working fine: the dates are set to today, the queries return valid JSON, and the charts display the correct data. However, the <input> fields are not updated and I can't figure out why. Also worth noting, after pressing the button on "empty" fields, the dates are correctly set and DO appear in the inputs afterwards. Here is the relevant code:

<script> // inside head tag
  function updateCharts() {
    startDate = document.getElementById("startDate").value;
    endDate = document.getElementById("endDate").value;
    scale = document.getElementById("scale").value;
    console.log("before " + startDate);
    if (startDate == "") {
        console.log("empty start");
        var today = new Date;
        startDate = today.getFullYear() + "-" + 
                    (today.getMonth() + 1) + "-" + // getMonth in range [0,11]
                    5;//today.getDate();
        document.getElementById("startDate").value = startDate;
        console.log("input " + document.getElementById("startDate").value);
    }
    if (endDate == "") {
        console.log("empty end");
        endDate = startDate;
        document.getElementById("endDate").value = endDate;
        console.log("output " + document.getElementById("endDate").value);
    }
    console.log("after " + startDate + " " + endDate);
    var charts = ['providers', 'variance', 'cities', 'convertions', 'unique_ids'];
    var len = charts.length;
    for (var i = 0; i < len; i++) {
        var chartType = charts[i]
        chart(chartType, startDate, endDate, scale);
    }
  }
</script>

Here are the input tags:

<div id="dates" class="row">
    <p>From: <input type="text" id="startDate" /> 
        To: <input type="text" id="endDate" />
        <select id="scale">
            <option value="0">Hour</option>
            <option value="1">Day</option>
            <option value="2">Month</option>
        </select>
        <button value="Show" onclick="updateCharts()">Show</button>
    </p>
</div>

And my script at the end of the body to call the function:

<script>
    window.onload = updateCharts();
</script>
</body>

The console output after the load, before pressing the button:

before 
index.html (line 41)
empty start
index.html (line 43)
input 2015-11-5
index.html (line 49)
empty end
index.html (line 52)
output 2015-11-5
index.html (line 55)
after 2015-11-5 2015-11-5

So as you can see the value is (correctly?) set and retrieved by Javascript after the conditionals, but it is not shown in the browser.

The values seems to be set in JSFiddle, probably the problem somes from somewhere else. See fiddle: http://jsfiddle.net/ddan/poygkzxn/ — DDan, Nov 30 '15 at 03:08
I see it works in the fiddle, I don't understand how the value can be seen by the console but not the fields. I tried Safari, Firefox, and Chrome, so it's not a browser issue either. I'm out of ideas on what could be wrong :( — gamda, Nov 30 '15 at 03:13
Look for javascript errors in console. If an error happened before updating, the value won't be set. — DDan, Nov 30 '15 at 03:18
There are no erros or warnings at all . @j08691 I also tried the jQuery way of setting values `$('#startDate').val(startDate);` and had it commented out, I forgot I actually deleted them. — gamda, Nov 30 '15 at 03:24
Try substituting `window.onload = updateCharts` for `window.onload = updateCharts();` — guest271314, Nov 30 '15 at 04:05
Wow! That did it! What is the difference between using and not using the `()`? Thank you so much @guest271314! — gamda, Nov 30 '15 at 04:14
`window.onload = updateCharts` references `updateCharts` as function to call at `onload` event ; `window.onload = updateCharts()` calls `updateCharts()` function when reached in `js` — guest271314, Nov 30 '15 at 04:16
I see, so the reason the text wasn't set could be that the function was being called before the input elements were properly loaded? Also, please add your comment as an answer so I can accept it in case someone comes across this. Again, thank you so much! @guest271314 — gamda, Nov 30 '15 at 04:25
@gamda _"so the reason the text wasn't set could be that the function was being called before the input elements were properly loaded?"_ Yes , see http://stackoverflow.com/questions/8830074/what-is-the-different-between-window-onload-init-and-window-onload-init — guest271314, Nov 30 '15 at 04:36

score 3 · Accepted Answer · edited May 23 '17 at 12:30

3

Try substituting window.onload = updateCharts for window.onload = updateCharts();

See GlobalEventHandlers.onload , What is the different between window.onload = init(); and window.onload = init;

edited May 23 '17 at 12:30

Community

1
1

answered Nov 30 '15 at 04:30

guest271314

1
15
104
177

Javascript glitch updating value of input

1 Answers1