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>

Answer 2

使用输入＆＃39;价值，而不是投入本身

您对用户在输入中键入的内容（即输入值）感兴趣，而不是输入自己输入的内容。您可以使用input.value属性获取输入值。

确保在执行脚本时加载DOM

确保在对DOM执行任何操作之前加载DOM（例如getElementById）。您应该将脚本标记放在<body>的末尾，或者将代码包装在onload处理程序中。

比较数字，而不是字符串

此外，在进行数字比较时，请确保实际上是在比较数字而不是字符串。在JavaScript中，"5" > "30"是true（是的......）。输入的值是一个字符串。如果要进行正确的数字比较，则必须先解析数值（例如，使用parseInt）。

＆＃13;

console.log('"5" > "30":', "5" > "30");
console.log('5 > 30:', 5 > 30);
console.log('parseInt("5") > parseInt("30"):', parseInt("5") > parseInt("30"));

＆＃13;

修复测试

正则表达式测试错误（当值为数字时显示警报，而不是在数字时显示警报）。此外，您只需检查parseInt的结果，而不是正则表达式。

照顾用户

最后，您还可以考虑使用type="number"类型的输入而不是type="text"来输入＆＃34;小数字＆＃34;和＃34;大数＆＃34;投入。 type="number"将限制可以直接在输入中输入的内容。它将避免用户错误和警报的挫败感。默认情况下，type="number"还会添加一些控件（即2个箭头来增加或减少条目）。请注意，即使您将类型设置为＆＃34; number＆＃34;，input.value仍然是需要解析的字符串，但这一次，此字符串将始终代表一个数字。

同样，您可以以编程方式自动更新＆＃34;大数字＆＃34;当用户输入一个＆＃34;小数字＆＃34;这是更大的，反之亦然。一个可能的错误，一个不那么恼人的警报。

您的代码已修复（没有UI建议）：

＆＃13;

var t = document.getElementById("t");
var s = document.getElementById("small");
var l = document.getElementById("large");
function sub_str() {
  var tVal = t.value;
  var sVal = parseInt(s.value, 10); // paseInt will return NaN if the string is not a number.
  var lVal = parseInt(l.value, 10);
  var short_str = tVal.substr(sVal,lVal);
  if (lVal<sVal) {
    window.alert("Please enter a number larger than the smaller number!");
  }
  // Typo here, you want to test if the values are *not* a number.
  else if (isNaN(sVal) || isNaN(lVal)){
    window.alert("please enter valid numbers!");
  } else {
    window.alert("Your statement is: " + short_str);
  }
}

＆＃13;

<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!</p>
<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>

＆＃13;

Answer 3

有很多问题。您没有在元素上使用.value来获取值，然后在加载DOM之前总是有可能执行代码。因此，请将您的处理放在process()内，然后使用

<body onload="process()">

在加载文档后调用此函数。

    <script type = "text/javascript"> 
    function process() {
        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);
            }
        }
        substr(); // Call the function here
    }
    </script>

用户输入以生成子字符串

3 个答案: