Question

我想做以下事情：

创建3个文本框和1个按钮
在3个方框中键入小写字母
点击按钮
单击按钮后，字母将转换为大写

为什么我在框中输入的字母没有被转换为大写字母？

这是我的代码：

<html>
<head>
<script>
function upperCase() {
    var x = document.getElementById("form_1");
    x = x.value.toUpperCase();
} 

</script>
</head>
<body>
<form name="form1" id="form_1" method="post">

Enter your name:
<input type="text" name="nameInput">

Enter your street address:
<input type="text" name="streetInput">

Enter your city/state:
<input type="text" name="cityStateInput">

<input type="button" name="upperCaseButton" value="Convert to Uppercase" 
 onclick="upperCase()">

</form>
</body>
</html>

Answer 1

您需要将每个<input>元素的值重新分配给其大写版本。在下面的脚本中，我添加了一个辅助方法，它接受一个元素id并尝试将该元素的值更改为大写。 upperCase()功能仍然是切入点，因此您根本不需要修改HTML代码。

<script>
    function upperCaseInput(var id) {
        var x = document.getElementById(id);
        x.value = x.value.toUpperCase();
    }

    function upperCase() {
        upperCaseInput("nameInput");
        upperCaseInput("streetInput");
        upperCaseInput("cityStateInput");
    }
</script>

<强>用法：

<input type="button" name="upperCaseButton" value="Convert to Uppercase"
       onclick="upperCase()">

Answer 2

你需要：

1）更改id的名称，以便您可以通过ID检索每个元素。

<form name="form1" id="form_1" method="post">

Enter your name:
<input type="text" id="nameInput">

Enter your street address:
<input type="text" id="streetInput">

Enter your city/state:
<input type="text" id="cityStateInput">

<input type="button" id="upperCaseButton" value="Convert to Uppercase" 
 onclick="upperCase('nameInput'); upperCase('streetInput'); upperCase('cityStateInput');">

</form>

2）为每个要将其值转换为大写的输入调用函数。

upperCase = function(name) {
    var inp = document.getElementById(name);
    inp.value = inp.value.toUpperCase();
}

参见演示：https://jsfiddle.net/gal007/tagLtyko/

同时将多个文本输入转换为大写

2 个答案: