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

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.

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:

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? Thanks in advance!

Molly Whitnack · Answer 1 · 2016-07-30T20:32:33.923

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>

the background color just flickers yellow instead of holding it down — lucyb, Jul 30 '16 at 20:17

Rayon · Accepted Answer · 2016-07-30T20:18:14.347

Pass yellow as string, as there is no yellow variable holding value
Test the Element.textContent property, not the element itself or else result will always be 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
Use 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>

the background color now just flickers yellow when I click the button and nothing holds. Also my new div's are not being appended :(. — lucyb, Jul 30 '16 at 20:16

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

2 Answers2