(7)JavaScript DOM练习题

需求1：点击submit按钮时检查是否选择type 若没有选择给出提示： “请选择类型”；
检查文本框是否有输入（可以去除前后空格），若没有输入，则给出提示：“请输入内容”；
若检查都通过，则在相应的ul节点中添加对应的li节点
需求2：使包括新增的li都能响应onclick 事件：弹出li的文本值

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	  
	  
	 
	  //需求： 点击submit按钮时  检查是否选择type  若没有选择给出提示： “请选择类型”；
	  //	  检查文本框是否有输入（可以去除前后空格）， 若没有输入，则给出提示：“请输入内容”；
	  //	 若检查都通过，则在相应的ul节点中添加对应的li节点
	  
	  //需求2：	使包括新增的li都能响应onclick 事件：弹出li的文本值。
	  window.onload = function()
	  {
	  	
	  	function showContent(liNode){
	  			alert("11^_^" + liNode.firstChild.nodeValue);
	  		}
	  	
	  	
	  	var liNodes = document.getElementsByTagName("li");
	  	for(var i = 0; i < liNodes.length; i++){
	  		liNodes[i].onclick = function(){
	  			showContent(this);
	  		}
	  	}
	  	
	  //1.	获取#submit 对应的按钮submitBtn
	  var submit = document.getElementById("submit");
	  //2.	为submitBtn 添加onclick响应函数
	  //3.	在onclick 响应函数的结尾处添加return false 就可以取消提交按钮的默认行为
	  submit.onclick = function () {
	  	
	  	//4.	检查是否选择type 若没有选择给出提示： “请选择类型”
	  	//4.1	选择所有的name=“type”  的节点types
		 var types = document.getElementsByName("type");
	  	//4.2	遍历types， 检查其是否有一个type的checked属性存在， 就可说明
	  	//有一个type被选中了： 通过if（元素节点.属性名） 来判断某一个元素节点是否有该属性
	  	var typeVal = null;
	  	for(var i = 0; i < types.length; i++){
	  		if(types[i].checked){
				typeVal = types[i].value;
	  		}
		
	  	}
	  	//4.3	若没有任何一个type被选中   则弹出：“情选择类型”。 响应方法结束：
	  	//return false
	  	if(typeVal == null){
	  		alert("请选择类型");
	  		return false;
	  	}
	  	//5.	获取name=“name”的文本值  ：通过value属性： nameVal
	  	var nameEle = document.getElementsByName("name")[0];
	  	var nameVal = nameEle.value;
	  	//6.	去除nameVal的前后空格
	  	var reg = /^\s*|\s*/g;
		nameVal = nameVal.replace(reg,"");
		
		//使name的文本框也去除前后空格
		nameEle.value = nameVal;
		//6.	把nameVal和“”进行比较， 若是“”说明值出入了空格，弹出“请输入内容”
	  	//方法结束： return falue
	  	if(nameVal == ""){
	  		alert("请输入内容");
	  		return false;
	  	}  
	  	
	  	nameEle
	  	//7.	创建li节点
	  	var liNode = document.createElement("li");
	  	//8.	利用nameVal	创建文本节点
	  	var content = document.createTextNode(nameVal);
	  	//9.	把8加为7的子节点
	  	liNode.appendChild(content);
	  	
	  	//11.	为新创建的li添加onclick 响应函数
	  	liNode.onclick = function () {
	  		showContent(this);
	  	}
	  	
	  	//10.	把7加为选择的type对应的ul的子节点
	  	document.getElementById(typeVal).appendChild(liNode);
	  	
	  	
	  	
	  	return false;
	  }
		
	  }
	  
	  
	</script>
</head>
<body>
	<p>你喜欢哪个城市？</p>
	<ul id = "city">
		<li id="bj">北京</li>
	   <li>上海</li>
	   <li>东京</li>
	   <li>首尔</li>
	</ul>
	
	<br><br>
	<p>你喜欢哪款单机游戏？</p>
	<ul id = "game">
	   <li id="rl">红警</li>
	   <li>实况</li>
	   <li>极品飞车</li>
	   <li>魔兽</li>
	</ul>
	
	<br><br>
	
	<form action="dom-8.html" name="myform">
		<input type="radio" name="type" value="city"/>城市
		<input type="radio" name="type" value="game"/>游戏  
		name: <input type="text" name="name"/>
		<input type="submit" value="Submit" id="submit">
	</form>
	
</body>
</html>

(7)JavaScript DOM练习题

猜你喜欢