无法获取用户输入数字作为JavaScript slice方法参数的问题排查

问题根源 #

• 页面加载完成后立刻读取输入框的value，此时用户还未输入内容，导致number1和number2始终为空字符串。
• 代码中未定义userInput变量，执行时会抛出引用错误。

修正方案 #

将读取输入框值的逻辑移到按钮点击事件内部，同时把字符串类型的输入值转为数字，还要确保userInput变量能正确获取到目标字符串。

完整修正代码 #

HTML（补充字符串输入框）

<input type="text" class="userInput" placeholder="输入要截取的字符串">
<input type="number" placeholder="起始位置" class="number1">
<input type="number" placeholder="结束位置" class="number2">
<button class="sliced">slice</button>
<h1 id="displaytext"></h1>

JavaScript

let message = document.querySelector("#displaytext")
let slicedButton = document.querySelector(".sliced")
let userInput = document.querySelector(".userInput")

slicedButton.addEventListener("click", ()=>{
    // 点击时读取当前输入值并转为数字
    let number1 = Number(document.querySelector(".number1").value)
    let number2 = Number(document.querySelector(".number2").value)
    
    console.log(number1, number2)
    // 处理空输入情况
    if (userInput.value) {
        message.innerHTML = userInput.value.slice(number1, number2)
    } else {
        message.innerHTML = "请输入要截取的字符串"
    }
})

关键说明 #

• 点击事件内获取输入值：确保每次点击都能拿到用户最新的输入内容。
• 转为数字类型：input[type="number"]的value返回字符串，slice()需要数字参数，用Number()转换保证参数类型正确。
• 输入校验：避免用户未输入字符串时出现错误显示。

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