网页设计innerHTML和value的区别，以及form(表单）输入数值求值计算

最新推荐文章于 2024-04-06 09:25:42 发布

皮卡大人

最新推荐文章于 2024-04-06 09:25:42 发布

阅读量803

点赞数

本文链接：https://blog.csdn.net/qq_46057218/article/details/103636593

版权

innerHTML是指标签内的html值，value是form控件当前的值：
首先，先了解一下getElementById() 是多个 JavaScript HTML 方法之一。
本例使用该方法来“查找” id=“demo” 的 HTML 元素，并把元素内容（innerHTML）更改为 “Hello JavaScript”：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能做什么</h2>
<p id="demo">JavaScript 能够改变 HTML 内容。</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我！</button>
</body>
</html>

注意：这里的innerHTML不能更改为value,
第二个例子通过value获取form控件当前的值（输入输出都是字符串）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>求和计算</title>
<script >    
  function sum() {            
  var s=0;
  var aa;
  for(i=1;i<=5;i++){
  aa=parseInt(document.getElementById("a"+i).value);
  s=s+aa;			    }   
  document.getElementById("he").value=s;
  return s;				
	}
</script>
</head>
<body>
  <form>
      <input type="text" id="a1"  />
      </br>
      <input type="text" id="a2"   /> 
      </br>
      <input type="text" id="a3"   /> 
      </br>
      <input type="text" id="a4"   />
       </br>
      <input type="text" id="a5"   />
       </br>
      <input type="text" id="he"  /><input type="button" onclick="sum()" value="求和"/>
	 </form> 
</body>
</html>

注意：我这里通过parseInt，把从form中获取的字符串（值）转换成了整数。
这里的value不能改为innerHTML。
这里用了循环通过Id获取值，代码简洁，返回值为了需要总值时直接调用。
皮卡大人是刚刚学习网页设计的小白，写这些以为了总结提高，和希望帮助其他小白。（欢迎大神指教），博客园我也开通了一个，好像这个好用一些。

皮卡大人

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
网页设计innerHTML和value的区别，以及form(表单）输入数值求值计算

innerHTML是指标签内的html值，value是form控件当前的值：首先，先了解一下getElementById() 是多个 JavaScript HTML 方法之一。本例使用该方法来“查找” id=“demo” 的 HTML 元素，并把元素内容（innerHTML）更改为 “Hello JavaScript”：<!DOCTYPE html><html>&...
复制链接

扫一扫