javascript - 用户输入生成子字符串

Question

在我的程序中，我有三个文本字段。在其中一个中，您应该填写一些文本，在另外两个中，您应该填写两个数字。单词数量较大的文本字段必须比单词数量较小的文本字段具有更大的值。但是，该数字必须小于用户输入文本的长度。

每当我运行该程序时，JavaScript 控制台都会说它无法读取子字符串 null 的属性。这是我的代码的相关部分。

<p> Input text, and fill in two numbers in the boxes below. </p>
<p> The number on the left must be smaller than the one on the right</p>
<p> Press on the button to see what happens!
<script type = "text/javascript"> 
var t = document.getElementById("t");
var s = document.getElementById("small");
var l = document.getElementById("large");
function sub_str() {
var short_str = t.substr(s,l);
var regex_num = /^([0-9]*)$/;
if (l<s) {
    window.alert("Please enter a number larger than the smaller number!");
}
if ((regex_num.test(s)) || (regex_num.test(l))){
    window.alert("please enter valid numbers!");
} else {
    window.alert("Your statement is: " + short_str);
    }
}
</script>
<form>
<input type = "text" id = "t"></input> <br />
<input type = "text" id = "small" size = "5">small number</input> <br />
<input type = "text" id = "large" size = "5">large number</input>
<button type = "button" id = "click" onclick = "sub_str()"> Check </button>
</form>

Answer 1

将 DOM 元素选择移动到函数中，并读取其值。试试这个:

<p> Input text, and fill in two numbers in the boxes below. </p>
<p> The number on the left must be smaller than the one on the right</p>
<p> Press on the button to see what happens!
<script type = "text/javascript"> 

function sub_str() {
    var t = document.getElementById("t").value;
    var s = document.getElementById("small").value;
    var l = document.getElementById("large").value;
    var short_str = t.substr(s,l);
    var regex_num = /^([0-9]*)$/;
    if (l<s) {
        window.alert("Please enter a number larger than the smaller number!");
    }
    if ((!regex_num.test(s)) || (!regex_num.test(l))){
        window.alert("please enter valid numbers!");
    } else {
        window.alert("Your statement is: " + short_str);
    }
}
</script>
<form>
<input type = "text" id = "t"></input> <br />
<input type = "text" id = "small" size = "5">small number</input> <br />
<input type = "text" id = "large" size = "5">large number</input>
<button type = "button" id = "click" onclick = "sub_str()"> Check </button>
</form>