lucyb lucyb - 4 months ago 7
HTML Question

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

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!

Answer
  • 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>

Comments