if文で2つの値を変更する

私はちょうどjavascriptを学び始めているので、これはかなり簡単な質問です。私は答えを探すことを試みたが、私はちょうど「ああ、これは違っているが、私の質問にも答えてくれるようには分からないと思う。if文で2つの値を変更する

私ができることをしたいのは、時刻に基づいてページの背景色を変更し、時刻に基づいて画像を変更することです。私は、ページの先頭に配置された背景色のif ... else if ...文と、本文の画像に影響する別のif ... else if ...文を処理します。

BGの色を変更するヘッドスクリプトは次のようになります。

var d=new Date(); 
var time=d.getHours(); 

if (time>=0 && time<=5) 
{ 
document.write ('&lt;body style="background-color: 296688">') 
} 
else if

...そして他の回は、異なる色でそれぞれに従ってください。

画像を変更身体スクリプトは次のようになります。

<img src="" name="sunMoon" id="sunMoon" /> 
    <script type="text/javascript"> 
    var d=new Date(); 
    var time=d.getHours(); 
    var elem = document.getElementById('sunMoon') 
if (time>=0 && time<=5) 
     { 
     elem.src = 'Images/sunMoon1.png' 
     } 
    else if

...そして他の回は、異なるSRCとそれぞれに従ってください。

頭に同じif ... else if ...文を使用して画像とbgの色を変更することはできますか？私は頭の中でこれを試した：

var d=new Date(); 
var time=d.getHours(); 
var elem=document.getElementById('sunMoon') 

    if (time>=0 && time<=5) 
    { 
    document.write ('<body style="background-color: 2966B8">'); 
      elem.src="images/sunMoon1.png" 
    } 
else if...

しかしそれは動作しませんでした。

私は3番目の（動作しない）例では、2つのこと（bgの色と画像を変更する）を行うことはできません。

出典

2012-03-09 mattjulian

を使用することができますスクリプトの実行時に存在しない要素のソース属性を変更しようとしています。一般的に言えば、ブラウザはページのHTMLを上から下に解析し、それがブロックを横切ってくるとコードを実行し、その後HTMLを通して処理を続けます。したがって、この例では、イメージソースを変更するJavaScriptコードを操作すると、HTMLの要素の後に来るので、その要素が機能します。壊れたコードでは、ヘッドセクションでelem=document.getElementById('sunMoon')と呼ばれるので、ID 'sunMoon'の要素はまだ存在しません。

一般的には、ページの下部（終了タグの直前）にスクリプトを配置して、他のものがロードされた後にスクリプトを実行し、ページのレンダリングをブロックしないようにすることをお勧めします。これを行う場合は、bodyタグに直接書き込むことができないので、背景色を変更するコードを変更する必要があります。ベストプラクティスの解決策は、時刻に応じて異なるCSSクラスを本文に適用し、CSSの各クラスのスタイルルールを設定することです。例えばので

：

<script type="text/javascript"> 

    var body = document.getElementsByTagName('body')[0]; 
    var elem = document.getElementById('sunMoon'); 

    if (time>=0 && time<5) 
    { 
    body.className = 'morning'; 
    elem.src = 'Images/sunMoon1.png'; 
    } 
    else if (time>=5 && time<10) 
    { 
    body.className = 'afternoon'; 
    elem.src = 'Images/sunMoon2.png'; 
    } 

</script>

は、その後、あなたのCSSにあなたが.morningのルールを必要とする、.afternoonなど完璧に働いた

出典

2012-03-09 03:54:35 MartinAnsty

！ありがとう！ – mattjulian

getElementsByTagName（）は、すべての要素を返すときに要素の配列を返します（要素が複数であることに注意してください）。ページから一致する要素のこの場合、たった1つの要素しか返されないので、ただ1つのタグがあるためです。 getElementsByTagname（ 'img'）を実行した場合、複数の要素が返されます。いずれの場合も、返された要素は配列に返されます。 [0]は配列の最初の項目を指定する方法です（この場合は唯一の項目です）。より多くのルックアップを学びたい場合は、JavaScript配列表記 – MartinAnsty

Gotcha。再度、感謝します！ – mattjulian

はいあなたは、あなたがこのようにボディスタイルを変更することができますすることができます

document.body.style.backgroundcolor = color;

出典

2012-03-09 03:47:31 Hanon

はい、あなたは、コードのあなたの第三（非稼働）ビットに問題があることである

var d=new Date(); 
var time=d.getHours(); 
var elem=document.getElementById('sunMoon') 

if (time>=0 && time<=5) 
{ 
document.body.style.backgroundImage ="images/sunMoon1.png"; 
document.body.style.backgroundColor = "#2966B8"; 
}

出典

2012-03-09 03:50:40 PraveenVenu

使用onloadイベント

<html> 
    <head> 
     <script> 

      function onBodyload(e){ 

        var image = document.getElementById('sunMoon'); 

        if(condition){ 
         document.body.style.backgroundcolor = ... 
         image.src = ... 
        }else if(condition){ 
         document.body.style.backgroundcolor = ... 
         image.src = ... 
        }else if...    

      } 

     </script> 
    </head> 
    <body onload="onBodyload"> 
     ... 
     ... 
    </body> 
</html>

出典

2012-03-09 04:59:36 Diode

if文で2つの値を変更する

答えて

関連する問題