HTML 下拉列表到 Javascript 变量显示错误
HTML Dropdown to Javascript variable display error
我正在尝试创建一个时钟来使用睡眠周期来建议起床时间。当使用 var hour = time.gethours（） 拉动小时和分钟时，我让它工作;但是，当我想让它使用下拉菜单中的用户输入时，我在输出中出现错误。代码如下。
错误的一个例子是 [object HTMLSelectElement]1：[object HTMLSelectElement]52 pm
<body>
<div id="container">
<br>
<div id="txt"></div>
<div class="row">
<div class="large-12 medium-12 small-12 columns">
<p class="title">Sleep Calculator</p>
</div>
</div>
<br>
<div class="row">
<div class="large-12 medium-12 small-12 columns">
<p id="currentTime" class="title"></p>
</div>
<div class="large-3 large-centered medium-4 medium-centered small-8 small-centered columns">
<form>
<select id="dropdown" name="dropdown">
<option value="0">Hours</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</form>
<form>
<select id="dropdownmin" name="dropdownmin">
<option value="0">Minutes</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</form>
</div>
</div>
<br>
<br>
<div class="row">
<div class="large-12 medium-12 small-12 columns">
<p class="intro1">Find out when to get up if you go to bed now</p>
</div>
</div>
<br>
<div class="row">
<div class="large-12 large-centered medium-12 small-12 columns">
<a class="button" onclick="sleepFunction()">zzz</a>
</div>
</div>
<div class="row">
<div class="large-12 medium-12 small-12 columns">
<p class="intro1" id="averageWarning"></p>
</div>
</div>
<div class="row">
<div class="large-12 medium-12 small-12 columns">
<p class="intro1" id="sleepNow"></p>
</div>
</div>
<br>
<div class="row">
<div class="large-2 medium-2 small-2 columns">
<p class="intro" id="demo"></p>
</div>
<div class="large-2 medium-2 small-2 columns">
<p class="intro" id="demo1"></p>
</div>
<div class="large-2 medium-2 small-2 columns">
<p class="intro" id="demo2"></p>
</div>
<div class="large-2 medium-2 small-2 columns">
<p class="intro" id="demo3"></p>
</div>
<div class="large-2 medium-2 small-2 columns">
<p class="intro" id="demo4"></p>
</div>
<div class="large-2 medium-2 small-2 columns">
<p class="intro" id="demo5"></p>
</div>
</div>
和 JS
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var amPM = "pm";
if (hours > 12) {
hours = hours - 12;
amPM = "pm"
}
document.getElementById("currentTime").innerHTML = hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ' ' + amPM;
function checkTime(i) {
if (i < 10) {
i = "0" + i
}; // add zero in front of numbers < 10
return i;
}
function sleepFunction() {
var time = new Date();
var hours = document.getElementById('dropdown');
var minutes = document.getElementById('dropdownmin');
var amPM = "pm";
// var fixmin = "0";
if (hours >= 12) {
hours = hours - 12;
amPM = "pm"
}
if (minutes < 10) {
minutes = minutes;
}
var hours = hours + 1;
var minutes = minutes + 52;
if (minutes >= 60) {
hours = hours + 1;
minutes = minutes - 60;
}
if (minutes < 10) {
minutes = minutes;
}
if (hours >= 12) {
hours = hours - 12;
amPM = "pm"
}
document.getElementById("demo").innerHTML = hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ' ' + amPM;
var hours = hours + 1;
var minutes = minutes + 15;
if (minutes >= 60) {
hours = hours + 1;
minutes = minutes - 60;
}
if (minutes < 10) {
minutes = minutes;
}
if (hours >= 12) {
hours = hours - 12;
amPM = "pm"
}
document.getElementById("demo1").innerHTML = hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ' ' + amPM;
var hours = hours + 1;
var minutes = minutes + 30;
if (minutes >= 60) {
hours = hours + 1;
minutes = minutes - 60;
}
if (minutes < 10) {
minutes = minutes;
}
if (hours > 12) {
hours = hours - 12;
amPM = "pm"
}
document.getElementById("demo2").innerHTML = hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ' ' + amPM;
var hours = hours + 1;
var minutes = minutes + 30;
if (minutes >= 60) {
hours = hours + 1;
minutes = minutes - 60;
}
if (minutes < 10) {
minutes = minutes;
}
if (hours > 12) {
hours = hours - 12;
amPM = "am"
}
document.getElementById("demo3").innerHTML = hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ' ' + amPM;
var hours = hours + 1;
var minutes = minutes + 30;
if (minutes >= 60) {
hours = hours + 1;
minutes = minutes - 60;
}
if (minutes < 10) {
minutes = minutes;
}
if (hours > 12) {
hours = hours - 12;
amPM = "am"
}
document.getElementById("demo4").innerHTML = hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ' ' + amPM;
var hours = hours + 1;
var minutes = minutes + 30;
if (minutes >= 60) {
hours = hours + 1;
minutes = minutes - 60;
}
if (minutes < 10) {
minutes = minutes;
}
if (hours > 12) {
hours = hours - 12;
amPM = "am"
}
document.getElementById("demo5").innerHTML = hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ' ' + amPM;
document.getElementById("averageWarning").innerHTML = "It Takes the Average Human 18 Minutes to Fall Aleep after viewing a screen";
document.getElementById("sleepNow").innerHTML = "If you go to bed right now, you should set your alarm for one of these times";
}
您正在尝试对 HTML 元素执行计算：
var hours = document.getElementById('dropdown');
if (hours >= 12) {
hours = hours - 12;
}
您需要这些元素中的值，而不是元素本身。 像这样：
var hoursSelect = document.getElementById('dropdown');
var hours = parseInt(hoursSelect.options[hoursSelect.selectedIndex].value);
相关文章：
- ng消息仅在触摸时显示错误，并在错误的初始显示上转换
- ui网格日期单元格过滤器，过滤日期格式导致显示错误的日期
- java脚本的数学方程显示错误的答案
- 如果用户输入的长度小于最小长度，则显示错误消息
- Push方法显示错误
- Javascript设置日期不起作用，显示错误的时间
- 显示错误的Ajax调用无法调试
- 显示错误结果的Javascript
- 分页逻辑显示错误的页码
- 如何显示错误消息
- 表单提交没有'如果为空，则不会显示错误消息
- 使用RecordRTC录制的WebRTC视频在IE和Safari中显示错误
- 如何仅在存在最小值和最大值时才显示错误消息
- AngularJS错误处理:根据错误数组显示错误
- PHP 显示错误的名称值
- 在 api 调用$resource显示错误和成功消息
- 为什么 Angularjs 总是显示错误消息
- 在单选按钮验证中同时显示错误消息
- jQuery'摇动'功能显示错误
- Jquery添加更多和删除冲突并显示错误值
