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

Question

Hi I am trying to change the background style color of my div tag when the input matches one of the values in my list that I have, and when it doesn't, I want to create a div tag and append the missing value to the bottom of my list because it did not match. 嗨，当输入与列表中的值之一匹配时，我试图更改div标签的背景样式颜色；当输入不匹配时，我想创建一个div标签并将缺少的值附加到我的列表的底部，因为它不匹配。

I searched around and found this thread and used the same methods proposed, but no luck. 我四处搜寻，发现了这个线程，并使用了建议的相同方法，但是没有运气。 Here is my attempt with my external js script: 这是我使用外部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>

What is correct way to change the style of a div with a function and to append a new div with javascript? 用函数更改div样式并使用javascript追加新div的正确方法是什么？ Thanks in advance! 提前致谢！

Answer 1

yellow should be a string and you need to find the correct element withing the page 黄色应该是一个字符串，您需要在页面中找到正确的元素

 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

Pass yellow as string, as there is no yellow variable holding value 将yellow作为字符串传递，因为没有yellow变量保持value
Test the Element.textContent property, not the element itself or else result will always be false 测试Element.textContent属性，而不是元素本身，否则结果将始终为false
Break the loop if value is found 如果找到值则中断循环
Keep a variable to test value is found, else append the element 保留一个变量以测试找到的值，否则追加元素
Use document.getElementById('courselist') instead of document.courselist to access the element 使用document.getElementById('courselist')而不是document.courselist来访问元素
Use return false; 使用return false; in function to prevent form submission 在功能上防止表单提交

 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