2017-10-15 4 views
0

ajax、jsp、サーブレット呼び出しを使用して、特定の要素の背景色を動的に更新しようとしています。私は自分のjs関数と私のサーブレットとコンソールログのスクリーンショットも含めました。コードはすべての行を実行していますが、フロントエンドでは何も変わりません。本当に助けに感謝!私もbgの変更を処理する別のJS関数を作成しようとしましたが、それはまったく役に立たなかった。私のブラウザで同じクラスのすべてのhtml要素の背景色が動的に変化する

 <script> 
     function validate() { 
       console.log("hello"); 
       var xhttp = new XMLHttpRequest(); 
       xhttp.open("GET", "/"+window.location.pathname.split("/")[1]+"/HomeServlet?inputName=" + document.searchform.search.value, false); 
       xhttp.send(); 
       if (xhttp.responseText.trim().length > 0) { 
        console.log("in if statement " + xhttp.responseText); 
        var str = xhttp.responseText; 
        var result = str.split(" "); 
        console.log("str " + str + " - result: " + result + " result size = " + result.length); 
        for(var i = 0; i < result.length; i++) { 
         console.log("in first loop"); 
         console.log("value:" + result[i]); 
         elements = document.getElementsByClassName(result[i]); 
         console.log("elements: " + elements.length); 
         for (var j = 0; j < elements.length; j++) { 
          console.log("in the loop"); 
          //elements[j].style.backgroundColor = "red"; 
          changeBg(elements[j]); 
         } 
        } 
       //return false; 
       } 
       return true; 
      } 
     function changeBg(element) { 
       alert(window.getComputedStyle(element).backgroundColor); 
       element.style.color = "red"; 

      } 
     </script> 

、私のコンソールは、次のコードは、すべての行を実行していることを証明読み、私は両方を試してみたので、まだelement.style.colorかのbackgroundColorを変更しない警告ボックスを出力する含まれていました。

+0

changeBg()の* background *カラー 'element.style.backgroundColor'ではなく* text *カラー(' element.style.color')を変更しています。 – FluffyKitten

答えて

0

style.colorは、フォントの色を変更することがあるので、

element.style.backgroundColor

代わりの

element.style.color

を使用してください背景色はありません

0

私は最善の解決策は、クラスの新しい色のスタイルを追加すると思います。助けのための

var counter = 0; 
 
\t \t function changeBG(){ 
 
\t \t \t counter++; 
 
\t \t \t var css = '.testBGclasss { background: '+(counter%2?'red':'blue')+'; }', 
 
\t \t \t \t head = document.head || document.getElementsByTagName('head')[0], 
 
\t \t \t \t style = document.createElement('style'); 
 

 
\t \t \t style.type = 'text/css'; 
 
\t \t \t if (style.styleSheet){ 
 
\t \t \t style.styleSheet.cssText = css; 
 
\t \t \t } else { 
 
\t \t \t style.appendChild(document.createTextNode(css)); 
 
\t \t \t } 
 

 
\t \t \t head.appendChild(style); 
 
\t \t }
<html> 
 
<head></head> 
 
<body> 
 
\t <div class="testBGclasss"> 
 
\t \t <h1>Some text<h1> 
 
\t </div> 
 
\t <input type="button" value="change background" onclick="changeBG()"/> 
 
\t </body> 
 
</html>

0

感謝。私はそれを理解し終わった。変更されたフォームの部分を動的に保持することはできません。

関連する問題