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

标签 javascript html

我想做以下事情:

  1. 创建 3 个文本框和 1 个按钮
  2. 在 3 个框中输入小写字母
  3. 点击按钮
  4. 点击按钮后,字母将转换为大写

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

这是我的代码:

<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>

最佳答案

您需要重新分配每个个体的值<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()">

关于javascript - 同时将多个文本输入转换为大写,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35495334/

相关文章:

javascript - Webpack 错误 - 来自 UglifyJs 的 bundle.js 中的错误 意外的标记 : name (urlParts)

jquery - 如何检测 localStorage 存储事件是否来自 IE 中的同一页面?

html - 我想让一个标题与 css 链接。不重复,另一个是2008

javascript - 分别更改div的内容

javascript - 从元素的子集解除 jQuery 监听器的绑定(bind)

java - Websocket连接自动关闭?

javascript - 循环进入表并从列内的不同输入获取值

javascript - 谷歌图表 : Show only a certain country

javascript - 自定义管道返回错误。::TypeScript & Angular2

html - 使 div 成为其内容的大小