2017-03-31 33 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()函数中编写代码来完成它。