大小写转换

最新推荐文章于 2025-12-11 16:05:35 发布

原创最新推荐文章于 2025-12-11 16:05:35 发布 · 115 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #html5

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

<h1>大小写转换</h1>
        原数据：<input type="text" id="oldNum">
        <br/><br/>
        操作：<button>转大写</button>
              <button>转小写</button>
              <br/><br/>
        新数据：<input type="text" id="newNum">
        <script>
            //获取dom元素
            var oldNum=document.getElementById('oldNum');
            var btn=document.querySelectorAll('button');
            var newNum=document.getElementById('newNum');

            //点击事件
            btn[0].onclick=function(){
                console.log(oldNum.value); //在控制台测试获取文本框的值
                console.log(oldNum.value.toUpperCase()); //在控制台测试将文件框的值转换为大写
                newNum.value=oldNum.value.toUpperCase();
            }

            btn[1].onclick=function(){
                console.log(oldNum.value); //在控制台测试获取文本框的值
                console.log(oldNum.value.toLowerCase());  //在控制台测试将文件框的值转换为大写
                newNum.value=oldNum.value.toLowerCase();
            }
        </script>