JavaScript onclick提示函数未定义 倒计时数学题生成代码运行报错

你遇到的genrt未定义报错，本质是JS代码存在语法错误，浏览器解析JS脚本时遇到致命语法错误后会终止整个脚本的解析，导致genrt函数根本没有被成功注册到全局作用域，所以点击按钮时找不到该函数。

具体错误及修复方法 #

• 语法错误（直接导致函数未定义的核心原因）：
  genrt函数开头两行代码分号位置错误，且漏取input的value属性
  原错误代码：

let leng = parseInt(document.getElementById("i1");)
let small = parseInt(document.getElementById("i2");)

修正后：

let leng = parseInt(document.getElementById("i1").value);
let small = parseInt(document.getElementById("i2").value);

• 逻辑错误1：remove函数功能不匹配
  你调用remove时传入的是数组索引，但现有remove是删除值等于传入参数的元素，不符合需求，直接简化为按索引删除即可：

function remove(arr, index){
    arr.splice(index, 1);
}

• 逻辑错误2：操作符生成与分支不匹配
  如果要保留除法逻辑，要把随机数范围改成4，否则除法分支永远不会触发：

// 原代码：let op = Math.floor(Math.random()*3)
let op = Math.floor(Math.random()*4)

建议额外增加整除判断，避免生成小数结果：

if(op==3){
    if(out % nuuuum !== 0) op = Math.floor(Math.random()*3) // 不能整除就换其他操作符
    else {
        out/=nuuuum
        ans+='/'
    }
}

• 逻辑错误3：大数字随机范围错误
  大数字数组有4个元素，随机下标范围要匹配数组长度：

// 原代码：anum.push(num[Math.floor(Math.random()*3)])
anum.push(num[Math.floor(Math.random()*num.length)])

• 隐性问题修复：

1. 所有未声明的变量（i、ans、lenggg）前面增加let声明，避免隐式全局变量报错
2. 每次调用genrt时先清空anum数组，避免多次点击累积历史数字：函数开头加anum = []
3. HTML中input的type属性从int改成标准的number
4. 计算操作次数lenggg时增加范围限制，避免出现负数：

let lenggg = Math.max(1, Math.min(anum.length, Math.floor(Math.random()*anum.length-3)+3))

修正后可运行的完整代码 #

JS代码 #

function remove(arr, index){
    arr.splice(index, 1);
}
function pop(array, value){
    let n = array[value]
    remove(array, value)
    return n;
}
let num = [25, 50, 75, 100]
let anum = []
let ans = ''
function genrt(){
    anum = []
    let leng = parseInt(document.getElementById("i1").value);
    let small = parseInt(document.getElementById("i2").value);
    for(let i=0; i<leng; i++){
        anum.push(Math.floor(Math.random()*10)+1)
    }
    for(let i=0; i<small; i++){
        anum.push(num[Math.floor(Math.random()*num.length)])
    }
    document.getElementById("1").innerHTML = "Your numbers are: " + String(anum);

    let nuum = Math.floor(Math.random()*(anum.length-1))
    let out = anum[nuum]
    remove(anum, nuum)

    ans = String(out)

    let lenggg = Math.max(1, Math.min(anum.length, Math.floor(Math.random()*anum.length-3)+3))
    for(let i=0; i<lenggg; i++){
        let op = Math.floor(Math.random()*4)
        let nnuu = Math.floor(Math.random()*(anum.length-1))
        let nuuuum = anum[nnuu]
        remove(anum, nnuu)
        if(op==0){
            out+=nuuuum
            ans+='+'
        }
        if(op==1){
            out-=nuuuum
            ans+='-'
        }
        if(op==2){
            out*=nuuuum
            ans+='*'
        }
        if(op==3){
            if(out % nuuuum !== 0){
                op = Math.floor(Math.random()*3)
                if(op==0){
                    out+=nuuuum
                    ans+='+'
                }
                if(op==1){
                    out-=nuuuum
                    ans+='-'
                }
                if(op==2){
                    out*=nuuuum
                    ans+='*'
                }
            }else{
                out/=nuuuum
                ans+='/'
            }
        }
        ans+=String(nuuuum)
    }
    document.getElementById("2").innerHTML = "Your target is: " + String(out);
}
function reveal(){
    document.getElementById("3").innerHTML = "The solution is (without bodmas): " + ans;
}

HTML代码 #

<!doctype html>
<html>
    <head>
        <title>countdown generator</title>
    </head>
    <body>
        <p>How many small numbers</p>
        <input type="number" id="i1" value=3>
        <p>How many big numbers</p>
        <input type="number" id="i2" value=2>
        
        <button onclick="genrt()">Generate</button>
        <p id="1">Your numbers are:</p>
        <p id="2">Your target is:</p>
        <button onclick="reveal()">Solve it</button>
        <p id="3">The solution is (without bodmas)</p>
        <script>
            // 把上面的JS代码放在这里，或者引入外部JS文件
        </script>
    </body>
</html>

注意要把JS代码放在HTML的<script>标签内，或者正确引入外部JS文件，否则函数依然无法被找到。

内容的提问来源于stack exchange，提问作者THEWHY