【发布时间】:2015-12-06 19:47:27
【问题描述】:
我正在开发一个使用 Morris.js 来创建图表的 HTML 页面。我添加了日历小部件以允许用户选择开始和结束日期,以及更新数据的按钮。我意识到如果我自动将日期设置为“今天”会很方便,这样图表在第一次加载时就已经有了数据。一切正常:日期设置为今天,查询返回有效的 JSON,图表显示正确的数据。但是,<input> 字段没有更新,我不知道为什么。另外值得注意的是,按下“空”字段上的按钮后,日期设置正确,之后会出现在输入中。以下是相关代码:
<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>
这里是输入标签:
<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>
以及我在正文末尾的脚本调用函数:
<script>
window.onload = updateCharts();
</script>
</body>
加载后,按下按钮前的控制台输出:
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
所以你可以看到值是(正确吗?)在条件句之后由 Javascript 设置和检索,但它没有显示在浏览器中。
【问题讨论】:
-
这些值似乎是在 JSFiddle 中设置的,可能是其他地方的问题。见小提琴:jsfiddle.net/ddan/poygkzxn
-
我看到它在小提琴中工作,我不明白控制台如何看到值而不是字段。我试过 Safari、Firefox 和 Chrome,所以这也不是浏览器问题。我不知道可能出了什么问题:(
-
在控制台中查找 javascript 错误。如果更新前发生错误,则不会设置该值。
-
为什么是 jQuery 标签?我没有看到。
-
根本没有错误或警告。 @j08691 我还尝试了 jQuery 设置值的方式
$('#startDate').val(startDate);并把它注释掉了,我忘了我实际上删除了它们。
标签: javascript jquery html