の変更テキストの色毎秒

HTMLコードの変更テキストの色毎秒

function changeColor() { 
 
    var x = document.getElementById("li1"); 
 
    x.style.color = "blue"; 
 
    if (x.style.color == "blue") { 
 
    x.style.color = "yellow"; 
 
    } 
 
} 
 
window.setInterval("changeColor", 1000);

<body> 
 
    <div class="leftDiv"> 
 
    <div id="stepsId"> 
 
     <ol> 
 
     <li id="li1"><b>Step 1</b></li> 
 
     <li id="li2"><b>Step 2</b></li> 
 
     <li id="li3"><b>Step 3</b></li> 
 
     </ol> 
 
    </div> 
 
    </div> 
 
</body>

私の主な目標は、各ステップは青>黄>青>黄毎秒を回すと3のステップ1から色を順番にあります昇順で私は何が間違っているのか分かりません。ここで

出典

2017-04-13 Kshitij Wahati

はですあなたのすべてのli要素を与えるであろう、注意してください/）正しい？ – Tushar

1. changeColor関数に "}"を付ける。 2. windows.setintervalの引用符を削除します。window.setInterval（changeColor、1000）; 3. DOMがロードされた後にjavascriptがロードされていることを確認します。 – alfredo

'window.setInterval（" changeColor "、1000）;'関数名の前後に引用符をつける必要はありません... – Shadow

あなたはあなたの関数閉鎖}を残し、そしてのでsetInterval()の呼び出しで最初の引数で関数名は関数を渡す、つまり、（引用符であってはならないので、参照、文字列ではありません）。

また、あなたのコードはリスト内の最初の要素のみを参照し、 "各ステップを昇順で"変更したいとします。だから、多分あなたは順番に自分の色を変更するためにそれらをループ、その後、すべてのli要素を選択するにはdocument.querySelectorAll("#stepsId li")を使用して、以下のような何かを行うことができます：あなたがいずれかを追加することができます

var colors = ["blue", "yellow"] 
 
var currentColor = 0 
 
var lis = document.querySelectorAll("#stepsId li") 
 

 
function changeColor() { 
 
    --currentColor 
 
    if (currentColor < 0) currentColor = colors.length -1 
 
    for (var i = 0; i < lis.length; i++) { 
 
    lis[i].style.color = colors[(currentColor +i) % colors.length] 
 
    } 
 
} 
 

 
setInterval(changeColor, 1000)

<div id="stepsId"> 
 
    <ol> 
 
    <li id="li1"><b>Step 1</b></li> 
 
    <li id="li2"><b>Step 2</b></li> 
 
    <li id="li3"><b>Step 3</b></li> 
 
    </ol> 
 
</div>

注意を

var colors = ["blue", "yellow", "red", "green", "orange"] 
 
var currentColor = 0 
 
var lis = document.querySelectorAll("#stepsId li") 
 
function changeColor() { 
 
    --currentColor 
 
    if (currentColor < 0) currentColor = colors.length -1 
 
    for (var i = 0; i < lis.length; i++) { 
 
    lis[i].style.color = colors[(currentColor +i) % colors.length] 
 
    } 
 
} 
 
setInterval(changeColor, 1000)

<div id="stepsId"> 
 
    <ol><li id="li1"><b>Step 1</b></li><li id="li2"><b>Step 2</b></li><li id="li3"><b>Step 3</b></li></ol> 
 
</div>

：配列し、それらのすべてを、それは意志のサイクルへの色の数

出典

2017-04-13 04:23:18 nnnnnn

は、作業コード

<html> 
    <head> 
    <script type="text/javascript"> 

     var x = setInterval(function() { 

     console.log('rrr'); 
     var x = document.getElementById("li1"); 
      x.style.color = "blue"; 
      if (x.style.color == "blue"){ 
      x.style.color = "yellow"; 
      } 
     }, 1000); 

    </script> 
    </script> 
    <body> 
    <div class="leftDiv"> 
      <div id = "stepsId" > 
      <ol> 
       <li id="li1"><b>Step 1</b></li> 
       <li id="li2"><b>Step 2</b></li> 
       <li id="li3"><b>Step 3</b></li> 
      </ol> 
      </div> 
     </div> 
    </body> 
    </html>

出典

2017-04-13 04:09:35

それは私のために働かない、色はテキスト上にポップしていません。 –

申し訳ありません私の間違いです –

私の2番目の回答を参照 –

これはあなただけではなく、私はあなたの意図であると仮定しliのすべての要素を、より、li1を変更しようとしている

<!DOCTYPE html> 
    <html> 
<head> 
    <script> 

     window.onload = function(){ 

     var x = document.getElementById("li1"); 
     x.style.color = "blue"; 

     function changeColor(){ 
      if (x.style.color == "blue"){ 
       x.style.color = "yellow"; 
      } 
      else if (x.style.color == "yellow"){ 
       x.style.color = "blue"; 
      } 
     }; 
     window.setInterval(changeColor,1000); 



     }; 
    </script> 
</head> 
<body> 
<div class="leftDiv"> 
     <div id = "stepsId" > 
     <ol> 
      <li id="li1"><b>Step 1</b></li> 
      <li id="li2"><b>Step 2</b></li> 
      <li id="li3"><b>Step 3</b></li> 
     </ol> 
     </div> 
    </div> 
</body> 
</html>

出典

2017-04-13 04:19:02 alfredo

の作品です。、配列を反復その後、document.querySelectorAll代わりのdocument.getElementByIdを使用して試してみて、のようなので

function changeColor() { 
    var x = document.querySelectorAll("#stepsId li"); 

    for (var i = 0; i < x.length; i++) { 
     x[i].style.color = x[i].style.color === 'blue' ? 'yellow' : 'blue'; 
    } 
} 
window.setInterval(changeColor, 1000);

この答えは、あなたがそれらすべてが同時に同じ色に変更することを想定しています。

出典

2017-04-13 04:19:04

は、最初に考慮するために、このコードに

<html> 
<head> 
<script type="text/javascript"> 
    var i = 1; 
    var x = setInterval(function() { 
    var x = document.getElementById("li1"); 
    console.log(x.style.color); 
     if (x.style.color == "blue"){ 
      x.style.color = "yellow"; 
     } else if (x.style.color === "yellow"){ 
     x.style.color = "red"; 
    } else if (x.style.color === "red"){ 
     x.style.color = "blue"; 
    } 

    }, 1000); 

</script> 
</script> 
<body> 
<div class="leftDiv"> 
     <div id = "stepsId" > 
     <ol> 
      <li id="li1" style="color: blue;"><b>Step 1</b></li> 
      <li id="li2"><b>Step 2</b></li> 
      <li id="li3"><b>Step 3</b></li> 
     </ol> 
     </div> 
    </div> 
</body> 
</html>

出典

2017-04-13 04:20:50

2つのことを参照してください：あなたがクローズに失敗するので、あなたが投稿

JavaScriptが構文的に有効ではありません、あなたのif文の中括弧（「}」）。
関数内のコードはすばやく表示されます。このページに表示される唯一の色の変化は、関数が終了したときの最終的な色の値です。

特定の時点でどの要素が黄色であるかを追跡し、次にどの要素を黄色にするかを決定する機能を設定する必要があります。既存のJSは動作しません

var li1 = document.getElementById("li1"); 
var li2 = document.getElementById("li2"); 
var li3 = document.getElementById("li3"); 
var yellow = li1; 

function changeColor() { 
    if(li1 == yellow) { 
    yellow = li2; 
    } else if(li2 == yellow) { 
    yellow = li3; 
    } else { 
    yellow = li1; 
    } 

    li1.style.color = "blue"; 
    li2.style.color = "blue"; 
    li3.style.color = "blue"; 
    yellow.style.color = "yellow"; 
} 

window.setInterval(changeColor, 1000);

出典

2017-04-13 04:21:23 user886

reference- http://codepen.io/nagasai/pen/NjWBxv

JSのためのsetInterval

Codepen URLを使用してオプションの下に機能
2.toggle色外

1.Initialize色を使用し、期待される結果を達成するために：

var x = document.getElementById("li1"); 
x.style.color = "blue"; 

function changeColor(){ 
x.style.color = x.style.color == "blue"?"yellow":"blue"; 
} 

window.setInterval(changeColor,1000);

close '}'が見つからないなどの構文エラーがあり、文字列ではないので関数の引用符を削除します

出典

2017-04-13 04:24:35

これはサイクルを達成する方法です。 LISを選択しながら、私はちょうどgetElementsByTagNameの使用beacuseしかしhttps://jsfiddle.net/tusharj/rn8ff2pj [この]（

var lis = document.getElementsByTagName("li"); var i = 0 var color ='blue' function changeColor(){ if(i==3){ i=0 } lis[i].style.color = color; if (lis[i].style.color == "blue"){ color = 'yellow' } else{ color = 'blue' } i = i+1; } window.setInterval(changeColor,1000);

<html> <body> <div class="leftDiv"> <div id = "stepsId" > <ol> <li id="li1"><b>Step 1</b></li> <li id="li2"><b>Step 2</b></li> <li id="li3"><b>Step 3</b></li> </ol> </div> </div> </body> </html>

出典

2017-04-13 04:30:27

の変更テキストの色毎秒

答えて

関連する問題