元素识别中的随机背景梯度函数问题

Question

我开发了一个程序，我的第一个函数 (GetValue()) 从我创建的颜色数组中选择两种颜色。这些颜色存储在变量中 - randomColor1 和 randomColor2接下来，我创建了一个函数来制作我的背景渐变。为此，我调用元素（randomColor1 和 randomColor2）。但它不工作并显示错误为未定义（randomColor1 和 randomColor2）并且我的背景颜色没有改变。最后，我合并了上述两个功能。请帮我修复我的代码。我不明白我做错了什么。我是菜鸟。这是我的代码function GetValue() {  var myarray = new Array( "#ff0000", "#ffe100", "#95ff00", "#2c8d94", "#ad6428", "#28ad9d");  var randomColor1 = myarray.splice(    Math.floor(Math.random() * myarray.length),1)[0];  var randomColor2 = myarray.splice(    Math.floor(Math.random() * myarray.length),1)[0];  document.getElementById("message").innerHTML = randomColor1 + randomColor2;}var styles = ["to right", "to bottom right", "-90deg"];function applyChanges(randomColor1, randomColor2) {  var randomColor1 = GetValue();  var randomColor2 = GetValue();  var bg = "";  var style = Math.floor(Math.random() * styles.length);  bg = "linear-gradient(" + styles[style] + "," + randomColor1 + "," + randomColor2 + ")";  $("body").css("background", bg);  $("#myInput").text(bg);}function changeBg() {  var randomColor1 = GetValue();  var randomColor2 = GetValue();  applyChanges(randomColor1, randomColor2);}

Answer 1

没有返回任何内容，因此修复它的GetValue()一种方法是返回两种颜色，然后按如下所示分配它们：

function GetValue() {

    var myarray = new Array("#ff0000", "#ffe100", "#95ff00", "#2c8d94", "#ad6428", "#28ad9d");

    var randomColor1 = myarray.splice(

        Math.floor(Math.random() * myarray.length), 1)[0];

    var randomColor2 = myarray.splice(

        Math.floor(Math.random() * myarray.length), 1)[0];

    /* Return like this*/

    return [randomColor1, randomColor2];

}

并将 changeBG() 更改为

function changeBg() {

    /* Get colors like this since they are returned like this*/

    var [randomColor1, randomColor2] = GetValue();

    /* Log it to see what colors they are*/

    console.log(randomColor1, randomColor2);

    /* Call the apply method*/

    applyChanges(randomColor1, randomColor2);

}

Answer 2

您必须简化您的 GetValue 函数：只需创建 1 个值并返回它。其余的都可以。

让我们在这里试试：

function GetValue() {

  var myarray = new Array( "#ff0000", "#ffe100", "#95ff00", "#2c8d94", "#ad6428", "#28ad9d");

  return myarray.splice(Math.floor(Math.random() * myarray.length),1)[0];

}

var styles = ["to right", "to bottom right", "-90deg"];

function applyChanges(randomColor1, randomColor2) {

  var randomColor1 = GetValue();

  var randomColor2 = GetValue();

  var bg = "";

  var style = Math.floor(Math.random() * styles.length);

  bg = "linear-gradient(" + styles[style] + "," + randomColor1 + "," + randomColor2 + ")";

  $("body").css("background", bg);

  $("#myInput").text(bg);

}

function changeBg() {

  var randomColor1 = GetValue();

  var randomColor2 = GetValue();

  applyChanges(randomColor1, randomColor2);

}

document.getElementById('btn').addEventListener('click', function() {

    changeBg();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='message'></div>

<input id='myInput'>

<button id='btn'>Click me</button>