0

我正在尝试在文本框中输入一个数字，并通过 switch 功能在另一个 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>
4

6 回答 6

1

您需要先将其转换为整数：

var d = parseInt(document.getElementById('test').value);
于 2012-08-16T14:42:44.440 回答
1

你的情况都是整数，来自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;
}

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

于 2012-08-16T14:48:07.357 回答
0

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

您可以将 switch 语句中的值转换为 int，或者将大小写更改为字符串。

例如对于每个案例陈述

case '1':

代替

case 1:

或者

switch ( d ) {

变成

switch ( Number ( d ) ) {
于 2012-08-16T14:43:22.740 回答
0

每当您从输入中获取数字时，您确实需要将其解析为数字类型。

var d = parseInt(document.getElementById('test').value, 10);
于 2012-08-16T14:44:15.350 回答
0

我建议使用数组而不是 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];
}
于 2012-08-16T14:47:42.553 回答
0

让我们简化一下：

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

于 2012-08-16T14:49:15.833 回答