Javascript：如何创建新的div并更改背景颜色

Question

嗨，当输入与列表中的值之一匹配时，我试图更改div标签的背景样式颜色；当输入不匹配时，我想创建一个div标签并将缺少的值附加到我的列表的底部，因为它不匹配。

我四处搜寻，发现了这个线程，并使用了建议的相同方法，但是没有运气。 这是我使用外部js脚本的尝试：

 function searchList() { var input = document.getElementById("search").value; if ((input == "")||(input == null)) { alert ('Error', 'values missing'); } var childDivs = document.getElementById('courselist').getElementsByTagName('div'); for (i = 0; i < childDivs.length; i++) { var childDiv = childDivs[i]; if (input = childDiv) { document.getElementById("container").style.backgroundColor = yellow; document.getElementById("courselist").style.backgroundColor = yellow; } else if (input != childDiv) { var div = document.createElement("div"); div.innerHTML = input; document.courselist.appendChild(div); } } }

 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title> Work</title> <style type="text/css"> fieldset {border:0px;} #courselist {width:300px;} #courselist div {border: 1px black solid;padding:10px;} </style> </head> <body> <div id="container"> <h2>Search a Course</h2> <form action="" method="post" onsubmit="return searchList()"> <fieldset> Enter the Course Name<br /> <input type="text" id="search" size="20" /><br /> <input type="submit" value="Search List" id="sub" /> <br /><br /> </fieldset> </form> <div id="courselist"> <div id="first">&nbsp;</div> <div> Machine Learning </div> <div> Image Processing</div> <div>Design and Analysis of Algorithms</div> <div>Web Programming II </div> <div>Advanced JAVA</div> <div>Pattern Recognition</div> </div> </div> <script type="text/javascript" src="main.js"></script> </body> </html>

用函数更改div样式并使用javascript追加新div的正确方法是什么？ 提前致谢！

Answer 1

黄色应该是一个字符串，您需要在页面中找到正确的元素

 function searchList() { var input = document.getElementById("search").value; if ((input == "")||(input == null)) { alert ('Error', 'values missing'); } var childDivs = document.getElementById('courselist').getElementsByTagName('div'); for (i = 0; i < childDivs.length; i++) { var childDiv = childDivs[i]; if (input === childDiv) { if(input === 'Machine Learning'){ document.getElementById("#courselist").find('.machineLearning').style.backgroundColor = 'yellow'; } } else if (input != childDiv) { var div = document.createElement("div"); div.innerHTML = input; document.courselist.appendChild(div); } } }

 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title> Work</title> <style type="text/css"> fieldset {border:0px;} #courselist {width:300px;} #courselist div {border: 1px black solid;padding:10px;} </style> </head> <body> <div id="container"> <h2>Search a Course</h2> <form action="" method="post" onsubmit="return searchList()"> <fieldset> Enter the Course Name<br /> <input type="text" id="search" size="20" /><br /> <input type="submit" value="Search List" id="sub" /> <br /><br /> </fieldset> </form> <div id="courselist"> <div id="first">&nbsp;</div> <div class = 'machineLearning'> Machine Learning </div> <div> Image Processing</div> <div>Design and Analysis of Algorithms</div> <div>Web Programming II </div> <div>Advanced JAVA</div> <div>Pattern Recognition</div> </div> </div> <script type="text/javascript" src="main.js"></script> </body> </html>

Answer 2

将yellow作为字符串传递，因为没有yellow变量保持value
测试Element.textContent属性，而不是元素本身，否则结果将始终为false
如果找到值则中断循环
保留一个变量以测试找到的值，否则追加元素
使用document.getElementById('courselist')而不是document.courselist来访问元素
使用return false; 在功能上防止表单提交

 function searchList() { var input = document.getElementById("search").value; if ((input == "") || (input == null)) { return alert('Error', 'values missing'); } var childDivs = document.getElementById('courselist').getElementsByTagName('div'); var found = false; for (i = 0; i < childDivs.length; i++) { var childDiv = childDivs[i]; if (input == childDiv.textContent) { document.getElementById("container").style.backgroundColor = 'yellow'; document.getElementById("courselist").style.backgroundColor = 'yellow'; found = true; break; } } if (!found) { document.getElementById("container").style.backgroundColor = ''; document.getElementById("courselist").style.backgroundColor = ''; //If you want to remove the `backgroundColor` var div = document.createElement("div"); div.innerHTML = input; document.getElementById('courselist').appendChild(div); } return false; }

 fieldset { border: 0px; } #courselist { width: 300px; } #courselist div { border: 1px black solid; padding: 10px; }

 <div id="container"> <h2>Search a Course</h2> <form action="" method="post" onsubmit="return searchList()"> <fieldset> Enter the Course Name <br /> <input type="text" id="search" size="20" /> <br /> <input type="submit" value="Search List" id="sub" /> <br /> <br /> </fieldset> </form> <div id="courselist"> <div id="first">&nbsp;</div> <div>Machine Learning</div> <div>Image Processing</div> <div>Design and Analysis of Algorithms</div> <div>Web Programming II</div> <div>Advanced JAVA</div> <div>Pattern Recognition</div> </div> </div>

Javascript：如何创建新的div并更改背景颜色

问题描述

2 个解决方案

解决方案1
2 2016-07-30 20:01:44

解决方案2
1 已采纳 2016-07-30 20:03:23

Javascript：如何创建新的div并更改背景颜色

问题描述

2 个解决方案

解决方案1 2 2016-07-30 20:01:44

解决方案2 1 已采纳 2016-07-30 20:03:23

解决方案1
2 2016-07-30 20:01:44

解决方案2
1 已采纳 2016-07-30 20:03:23