Javascript: Wie man ein neues div erzeugt und Hintergrundfarbe ändert

Hi ich versuche, die Hintergrundartfarbe meines div Etiketts zu ändern, wenn die Eingabe mit einem der Werte in meiner Liste übereinstimmt, die ich habe, und wenn es nicht tut Ich möchte ein Div-Tag erstellen und den fehlenden Wert an den unteren Rand meiner Liste anhängen, weil er nicht zusammenpasst.Javascript: Wie man ein neues div erzeugt und Hintergrundfarbe ändert

Ich suchte und fand this Thread und verwendete die gleichen Methoden vorgeschlagen, aber kein Glück. Hier ist mein Versuch, mit meinem externen js Skript:

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>

Was richtiger Weg ist, den Stil eines div mit einer Funktion zu ändern und ein neues div mit Javascript zu anhängen? Danke im Voraus!

Quelle

2016-07-30 lucyb

Pass yellow als Zeichenfolge finden, da es keine yellow variable Halte value
Testen Sie die Element.textContent Eigenschaft, nicht das Element selbst oder das Ergebnis wird immersein
die Schleife brechen, wenn Wert gefunden wird
eine Variable halten Wert zu testen, wird gefunden, sonst hängen Sie das Element
Verwenden document.getElementById('courselist') statt document.courselist das Element zugreifen
Verwenden return false; in Funktion Formularübermittlung zu verhindern

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>

Quelle

2016-07-30 20:03:23 Rayon

Die Hintergrundfarbe flackert jetzt nur gelb, wenn ich auf den Knopf klicke und nichts hält. Auch meine neuen Divs werden nicht angehängt :(. – lucyb

@lucyb - Überprüfen Sie das Update ... – Rayon

das scheint zu funktionieren, danke! – lucyb

gelb sollte eine Zeichenfolge sein, und Sie müssen das richtige Element withing der Seite

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>

Quelle

2016-07-30 20:01:44

Die Hintergrundfarbe flackert nur gelb, anstatt sie zu halten – lucyb

Javascript: Wie man ein neues div erzeugt und Hintergrundfarbe ändert

Antwort

Verwandte Themen