函数内声明的变量调用console.log输出时返回undefined的问题求助

你遇到的j输出undefined有两个核心原因：

1. 大小写不匹配 #

HTML下拉选项里的文本是Chicken（首字母大写），但你的JS判断条件写的是o=="chicken"（全小写），这导致条件永远不成立，j根本不会被赋值。

2. var的变量提升特性 #

用var声明的变量会被提升到函数作用域顶部，所以即使if块没执行，j已经存在但未初始化，自然输出undefined。

修复方案 #

方案一：统一大小写判断 #

把判断条件里的字符串统一转换后比较，彻底避免大小写问题：

function mix() {
    var i = document.getElementById("a").value
    console.log(i)
    if (i.toLowerCase() == "chicken") {
        var c = "has wings"
        var d = "feathered"
        var e = "eats vegetables and grains"
        var f = "white, brown or black in color"
        var g = "40-60cm long"
        var h = "produces chicken meat"
    }
    var o = document.getElementById("b").value
    console.log(o)
    if (o.toLowerCase() == "chicken"){
        var j = "has wings"
        var k = "feathered"
        var l = "eats vegetables and grains"
        var m = "white, brown or black in color"
        var n = "40-60cm long"
        var p = "produces chicken meat"
    }
    console.log(j)
}

方案二：用let替代var，提前初始化变量 #

let是块级作用域，不会有变量提升的问题，提前声明并初始化变量可以避免意外的undefined：

function mix() {
    let i = document.getElementById("a").value
    console.log(i)
    let c, d, e, f, g, h;
    if (i.toLowerCase() == "chicken") {
        c = "has wings"
        d = "feathered"
        e = "eats vegetables and grains"
        f = "white, brown or black in color"
        g = "40-60cm long"
        h = "produces chicken meat"
    }
    let o = document.getElementById("b").value
    console.log(o)
    let j, k, l, m, n, p = ""; // 初始化默认值
    if (o.toLowerCase() == "chicken"){
        j = "has wings"
        k = "feathered"
        l = "eats vegetables and grains"
        m = "white, brown or black in color"
        n = "40-60cm long"
        p = "produces chicken meat"
    }
    console.log(j)
}

这样修改后，当你选择Chicken选项时，j就会被正确赋值并输出，不会再返回undefined。

内容的提问来源于stack exchange，提问作者Foxtrot -14