2017-03-31 34 views
0

好的,我在玩javascript。我想創建一個帶有「更換背景」按鈕的網頁,該按鈕在不同顏色之間循環。所以我這樣寫了(腳本標籤從視圖開始)在其功能之外使用變量'i'

var bgcolors = ["pink", "beige", "wheat", "white", "brown"]; 

     var i = 0; 

     function cyclebg(){ 

      document.body.style.backgroundColor = bgcolors[i]; 

      i++; 

      if (i > (bgcolors.length - 1)) 
      { 
       i = 0; 
      } 

     } 

     //other ideas: 
     //-say color next to button 
    </script> 
    <br> 
    <br> 
    <button type="button" style="background-color:red; border-color: red;" OnClick="cyclebg()">Change Background Color</button> 

工作得很好。然後我決定做一個版本,並在按鈕旁邊顯示顏色的名稱。所以我補充說...

<script>document.write(bgcolors[i]); 

    </script> 

然而,總是寫「粉紅色」。看起來這個「document.write」腳本只能讀取「我」在功能之外的內容。爲什麼是這樣? javaSCRIPT中的所有變量都不是全局變量嗎?我怎樣才能讓它讀取函數中的「我」,所以它顯示了在背景中使用的顏色的名稱?

+2

'javaSCRIPT中的所有變量都不是全局變量嗎?'對此的回答是否定的,範圍在JS中是非常真實的。 –

+2

此外,document.write會在解析該行時立即運行(並且只會執行一次),並且該功能不會運行,直到您單擊按鈕爲止。 – Marie

+0

'document.write' ...'恐怖'! – Hackerman

回答

0

當點擊按鈕時添加一個元素到目標將是做你正在嘗試完成的最簡單的方法。

HTML

<button type="button" style="background-color:red; border-color: red;" OnClick="cyclebg()">Change Background Color</button><span id="color-name"></span> 

JS

var bgcolors = ["pink", "beige", "wheat", "white", "brown"]; 

var i = 0; 

function cyclebg(){ 
    document.body.style.backgroundColor = bgcolors[i]; 
    document.getElementById("color-name").innerHTML = bgcolors[i] 
    i++;       
    if (i > (bgcolors.length - 1)) 
     { 
      i = 0; 
     } 
} 

https://jsfiddle.net/rt7t1fws/

0

你可以通過改變顏色返回一個函數中使用過bgcolorsi封閉。然後使用span標籤作爲顏色名稱。

var cyclebg = function() { 
 
    var bgcolors = ["pink", "beige", "wheat", "white", "brown"], 
 
     i = 0; 
 
     
 
    return function() { 
 
     document.body.style.backgroundColor = bgcolors[i]; 
 
     document.getElementById('color').innerHTML = bgcolors[i]; 
 
     i++; 
 
     i %= bgcolors.length; 
 
    }; 
 
}();
<br><br><button type="button" style="background-color:red; border-color: red;" onclick="cyclebg()">Change Background Color</button> <span id="color"></span>

0

這樣看來,「文件撰寫」腳本僅能夠讀取 什麼是「我」是功能之外。爲什麼是這樣?

當執行document.wite i的值是0。根據你的代碼看來,你是不是寫/執行document.write(bgcolors[i]);代碼每次cyclebg()被調用。

並不是javaSCRIPT中的所有變量都是全局變量嗎?

函數外部聲明的變量,成爲全球

我怎樣才能得到它讀什麼「i」是裏面的功能,所以它 顯示顏色的名稱中使用背景?

查看@Jach M的回答。在你的cyclebg()函數中編寫代碼來完成它。