如何在JavaScript中获取type为text的input元素并赋值

我看了你的代码，问题出在几个关键细节上，咱们一步步来修正：

1. 错误的元素获取逻辑 #

你用了document.getElementsByTagName("text")，但这个方法是根据HTML标签名查找元素的——你的文本框标签是<input>，不是<text>，所以这个方法根本找不到目标元素。

而你的文本框已经设置了唯一的id="text"，这时候用document.getElementById("text")是最直接可靠的方式，因为页面上的id是唯一的，能直接定位到单个元素。

2. 拼写错误与类型转换问题 #

• 代码里的els是拼写错误，应该写成else；
• 另外，文本框的value属性返回的是字符串类型，如果直接和数字18比较，会出现字符串比较的逻辑错误（比如输入"20"时，字符串比较"20"<="18"会返回true），所以需要把它转换成数字类型，比如用parseInt()或者Number()。

修正后的完整代码 #

<html>
<body>
    <p id="p" align="justify">HI</p>
    <input type="text" placeholder="Enter age" id="text"/>
    <input type="button" onclick="z()" value="Submit"/>
    <script>
        function z() {
            // 通过id获取文本框元素
            var ageInput = document.getElementById("text");
            // 确保元素存在，再获取值并转成十进制数字
            var age = ageInput ? parseInt(ageInput.value, 10) : 0;
            
            // 处理非数字输入的情况
            if(isNaN(age)) {
                alert("请输入有效的数字年龄！");
                return;
            }
            
            if(age <= 18) {
                alert("age is less Than and equal to 18 Year");
            } else {
                alert("age is greater than 18 Year");
            }
        }
    </script>
</body>
</html>

额外优化说明 #

我加了isNaN()的判断，用来处理用户输入非数字的情况，避免逻辑报错；同时parseInt()的第二个参数10指定了十进制转换，防止出现八进制解析的意外情况。

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