Question

我正在尝试在文本框中输入一个数字，并通过切换功能将该消息显示为另一个div标签中的当天名称。我传入switch函数的变量必须从文本框中获取值。但我无法在点击按钮上输出功能，它显示消息“未定义”。请帮忙：）。谢谢

<input type = "text" id = "test" />
<br>
<div id="box3" style = "border:solid 2px blue; height:15px;width:100px;"></div>
<br>
<input type = "button" onClick = "myTest()" value = "Click me" />

<script type="text/javascript">
function myTest(){
var x;
var d =document.getElementById('test').value;
switch (d)
{
case 0:
x="Today it's Sunday";
break;
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";
break;
case 3:
x="Today it's Wednesday";
break;
case 4:
x="Today it's Thursday";
break;
case 5:
x="Today it's Friday";
break;
case 6:
x="Today it's Saturday";
break;
}
document.getElementById('box3').innerHTML=x;
}

</script>

Answer 1

首先需要将它强制转换为整数：

var d = parseInt(document.getElementById('test').value);

Answer 2

你的情况都是整数，来自dom的所有东西都是一个字符串，所以你必须解决这个问题：

var d = +(document.getElementById('test').value);//+ converts to number

请确保其中没有字符，但当字符串看起来像+someString时，NaN会返回123fdsf。 parseInt可以处理数字，然后是字符，但是对于带有前导空格和前导零的字符串（解释输入为八进制）并不是太友好了，所以如果可能输入将优先使用parseFloat包含字符/前导零。

或者，引用您的案例，并提供一个默认案例：

case '6': x = 'Today is Saturday'; break;
default: x = 'Don\'t know what '+d+' is';

所以你可以看到你传递给开关的价值

回应@KooiInc Let's simplify：让我们优化并且无可否认地复杂化（但提高性能）：

关闭:(需要首先加载dom）

var test = (function(dayArray)
{
    var out = document.getElementById('box3');//only search dom once
    var in = document.getElementById('test');
    return function()
    {
        var day = dayArray[in.value] || 'Don\'t know day ' + in.value;
        out.innerHTML = 'Today is ' + day;
    }
})('Sunday,Monday,Tuesday,Wednessday,Thursday,Friday,Saturday'.split(','));

功能属性：

function test()
{
    if (!test.inElem)
    {
        test.inElem = document.getElementById('test');//search dom on first call
    }
    if (!test.outElem)
    {
        test.outElem = document.getElementById('box3');
    }
    if (!(test.days instanceof Array))
    {
        test.days = 'Sunday,Monday,Tuesday,Wednessday,Thursday,Friday,Saturday'.split(',');//create array once
    }
    var day = dayArray[test.inElem] || 'Don\'t know day ' + test.inElem;
    test.outElem.innerHTML = 'Today is ' + day;
}

这些例子只是为了好玩。我知道过早的优化是所有邪恶的根源，所以在这个阶段不要太担心它。只要知道函数是对象，所以你可以设置保留在内存中的属性，即使在函数返回后也是如此，并且知道闭包也可以做到（并且更多）。

Answer 3

它将值读取为字符串，而不是int。

要么将switch语句的值转换为int，要么将case更改为字符串。

e.g。对于每个案例陈述

case '1':

而不是

case 1:

或

switch ( d ) {

变为

switch ( Number ( d ) ) {

Answer 4

每当你从输入中得到一个数字时，你真的需要将它解析为数字类型。

var d = parseInt(document.getElementById('test').value, 10);

Answer 5

我建议使用数组而不是switch语句。您还需要将输入解析为数字。

function myTest() {
    var days = [
        'Sunday',
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday'
    ];

    var d = parseInt(document.getElementById('test').value, 10);

    document.getElementById('box3').innerHTML = 'Today is ' + days[d];
}

Answer 6

Let'simplify：

function dayOfWeek(val){
 // create an array of weekdays
 var dow = 'Sunday,Monday,Tuesday,Wednessday,Thursday,Friday,Saturday'
            .split(',');
 // print a string in #box3
 document.getElementById('box3').innerHTML = 
     'Today it\'s '+dow[Number(val)] || 'can\'t determine';
}
dayOfWeek(document.getElementById('test').value);

请参阅jsfiddle

无法输出值：JavaScript

6 个答案: