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

Question

您好，当输入与我的列表中的值之一匹配时，我正在尝试更改 div 标签的背景样式颜色，如果不匹配，我想创建一个div 标记并将缺失值附加到我的列表底部，因为它不匹配。

我四处搜索并找到 this 线程并使用了建议的相同方法，但没有成功。这是我对外部 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 的样式并将新的 div 附加到 javascript 的正确方法是什么？提前致谢！

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 并更改背景颜色

Javascript: How to create a new div and change background color

html

javascript

styles

external

append