innerHTML与value的区别

最新推荐文章于 2022-03-05 14:03:39 发布

P94very

最新推荐文章于 2022-03-05 14:03:39 发布

阅读量453

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/P94very/article/details/80853517

本文介绍了一个简单的网页版计算器实现过程，使用HTML、CSS和JavaScript完成。该计算器能够接收两个数字输入，并在用户点击“求和”按钮后计算这两个数字的和。文章通过具体的代码示例展示了如何限制输入内容仅包含数字，以及如何在页面上动态显示计算结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，我们直接来看例子吧

html部分

	<div class="a">
        <input type="text" name="" placeholder="0">
        +
        <input type="text" name="" placeholder="0">
        =
        <span>?</span>
        <button>求和</button>
    </div>

效果如下(CSS样式可以根据自己的喜欢调)

JavaScript部分

		window.onload = function ()
		{
			var oInput = document.getElementsByTagName("input");
			var oBtn = document.getElementsByTagName("button")[0];
            var oSpan = document.getElementsByTagName("span")[0];

            for(var i = 0; i < oInput.length; i++)
            {
            	oInput[i].onkeyup = function ()
            	{
            		this.value = this.value.replace(/[^\d]/, "");
            	}
            }

            oBtn.onclick = function ()
            {
            	( oInput[0].value == "" && oInput[1].value == "" ) ? alert("请输入数字") : oSpan.innerHTML = oInput[0].value + oInput[1].value ;
            }
		}

其中两个input中的内容是value，而span显示的内容则为innerHTML

 oSpan.innerHTML = oInput[0].value + oInput[1].value

运行后的结果如下