愚かな変数で愚かな問題がある。アルフ

私はこの小さなメトロノームプロジェクトに立ち往生しています。 2つの背景色の間で前後に点滅するはずです。両方の色が定義されている限り、正常に動作します（JS行12の "col"を任意の色に切り替えて動作させる）。しかし、私はそれを作るようにしていますので、色の1つをクリックしてランダム化することもできます。私は自分の数値randomizerが変数 "col"に対して正しい16進数の色の値を生成しているが、その変数を動作させることはできないと（console.log）に伝えることができます。私は引用符なしで "col"を試しました。私は間違って何をしていますか？私はJSでかなり新しいです。 http://codepen.io/Fedreg/pen/xVqwjQ/愚かな変数で愚かな問題がある。アルフ

http://codepen.io/Fedreg/pen/xVqwjQ/

<head></head> 
<body> 
       <div id="title"> 
     flashnome 
    </div> 
    <div id="desc">    
    the silent metronome 
     <p> 
     <button onclick="slower();" id="button1"> 
      slower 
     </button> 
     <button onclick="faster();" id="button1"> 
      faster 
     </button> 
     </p> 
     <p> 
     <button onclick="change();" id="button1">Change Color</button> 
    </p> 
    </div> 
</body> 


    @import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,700); 

html, body { 
     height: 100%; 
    width:100%; 
} 

#title { 
    text-align: center; 
    color: white; 
    font-size: 5em; 
     font-family: 'Josefin Sans', sans-serif; 
     margin: auto; 
     text-transform: uppercase; 
    padding: 2em 0 .2em; 
    } 


#desc { 
    text-align: center; 
    color: white; 
    font-size: 2em; 
     font-family: 'Josefin Sans', sans-serif; 
     margin: auto; 
     text-transform: uppercase; 
    padding: 0; 
    } 

#button1 { 
    text-align: center; 
    font-size: .7em; 
     font-family: 'Josefin Sans', sans-serif; 
     margin: 0 auto; 
     text-transform: uppercase; 
    padding: 8px; 
    } 



var x = 500; 
var flashStep = 1; 
var myInterval; 

function change() { 
var col = '#' + (Math.random().toString(16) + '000000').slice(2, 8); 
    console.log(col); 
} 

function flash() { 
    if (flashStep == 1) { 
    document.bgColor = "col"; 
    flashStep = 2; 
    } else { 
    document.bgColor = "#333"; 
    flashStep = 1; 
    } 
} 

function faster() { 
    window.clearInterval(myInterval); 
    myInterval = window.setInterval(flash, x -= 25); 
} 

function slower() { 
    window.clearInterval(myInterval); 
    myInterval = window.setInterval(flash, x += 25); 
} 

myInterval = window.setInterval(flash, x); 

function change() { 
var col = '#' + (Math.random().toString(16) + '000000').slice(2, 8); 
    console.log(col); 
}

出典

2016-03-24 Fedreg

"randomColor" という名前のグローバル変数を作成し、それを変更します。ここでは

はcodepenへのリンクです。

var x = 500; 
    var flashStep = 1; 
    var myInterval; 
    var randomColor = "#FFFF00"; 

function change() { 
var col = '#' + (Math.random().toString(16) + '000000').slice(2, 8); 
    randomColor = col; 
    console.log(col); 
} 

function flash() { 
    if (flashStep == 1) { 
    document.bgColor = randomColor; 
    flashStep = 2; 
    } else { 
    document.bgColor = "#333"; 
    flashStep = 1; 
    } 
} 

function faster() { 
    window.clearInterval(myInterval); 
    myInterval = window.setInterval(flash, x -= 25); 
} 

function slower() { 
    window.clearInterval(myInterval); 
    myInterval = window.setInterval(flash, x += 25); 
} 

myInterval = window.setInterval(flash, x);

出典

2016-03-24 06:27:34 Bikee

ありがとうございました！グローバル変数をcolに変更する方法を理解できませんでした。 JSの基本のいくつかはまだ私を逃れます。本当に助けに感謝します！ – Fedreg

大歓迎です。あなたの問題Thanxを解決した場合は、それを回答として受け入れてください。何か質問があれば教えてください。 – Bikee

まず、あなたは二度の変化（）関数を書きました。その中で、の変数キーワードを使用しています。これはchange（）関数内の変数をローカルにします。何もないその関数のはcolにアクセスできます。

change（）関数の上にcolをグローバルとして定義するだけです。それを参照するときは、ではなくを引用符で囲みます。これは文字列（リテラル値 "col"）になります。

ので：あなたは "変更（）" 機能に "復帰" を使用して、その後、フラッシュ（）関数int型の変化を（）を呼び出すことで、グローバル変数の使用を避けることができ

var col = false; 

function change(){ 
    col = '#F11'; 
} 

change(); 

document.bgColor = col;

出典

2016-03-24 06:29:36

助けてくれてありがとう！ダブルチェンジ（）関数は、質問を投稿している間の単なるコピー/ペーストの問題でした。私はそれが範囲の問題だと思ったが、それを修正しようとする試みは役に立たなかった。心から感謝する！ – Fedreg

function change() { 
    var col = '#' + (Math.random().toString(16) +  '000000').slice(2, 8); 
    console.log(col); 

    return col; 
} 

function flash() { 
    if (flashStep == 1) { 
    document.bgColor = change(); 
    flashStep = 2; 
    } else { 
    document.bgColor = "#333"; 
    flashStep = 1; 
    } 
}

。これは、グローバル変数を使用するよりも少し「実践的」です。

出典

2016-03-24 06:56:38 zeropublix

ありがとう！私は返されたcolを使用する方法を見つけようとしていましたが、あなたのようにbgColor = change（）を設定しようとしませんでした。多くのことを学ぶことができますが、私はプロジェクトを一緒にハッキングし、自分のミスをうまく処理することでそれをもっとうまく吸収するので、本当に助けに感謝します。 – Fedreg

愚かな変数で愚かな問題がある。アルフ

答えて

関連する問題