提示: "请选择类型"; // 检查文本框中是否有输入(可以去除前后空格),若没有输入,则给出提示: "请输入内容"; //若检查都通过,则在相应的 ul 节点中添加对应的 li 节点 //需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值. window.onload = function(){ function showContent(liNode){ alert("^_^#" + 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 响应函数 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; break; } } //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 false if(nameVal == ""){ alert("请输入内容"); return false; } //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); //3. 在 onclick 响应函数的结尾处添加 return false,就可以取消提交按钮的 //默认行为. return false; } }

你喜欢哪个城市?

• 上海
• 东京
• 首尔

你喜欢哪款单机游戏?

• 实况
• 极品飞车
• 魔兽

dio" name="type" value="city">城市 dio" name="type" value="game">游戏 name: