无法输出值:JavaScript

not able to output value : JavaScript

本文关键字：JavaScript 输出      更新时间：2023-09-26

我正在尝试在文本框中输入一个数字，并通过开关功能在另一个div标签中将消息显示为当天的名称。 我传递给开关函数的变量必须从文本框中获取值。 但是我无法在单击按钮时输出该功能，它显示消息"未定义"。请帮忙:)。 谢谢

<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>
你需要

先把它转换为整数：

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

你的案例都是整数，来自 dom 的所有内容都将是一个字符串，所以你必须解决这个问题：

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

确保其中没有字符，但当字符串看起来像123fdsf时+someString会返回NaN。 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;
}

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

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

要么将 switch 语句中的值转换为 int，要么将大小写更改为字符串。

例如，对于每个案例陈述

case '1':

而不是 

case 1:

或

switch ( d ) {

成为

switch ( Number ( d ) ) {

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

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

我建议使用数组而不是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];
}

让我们简化一下：

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

相关文章：