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

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() {&nbsp; var myarray = new Array( "#ff0000", "#ffe100", "#95ff00", "#2c8d94", "#ad6428", "#28ad9d");&nbsp; return myarray.splice(Math.floor(Math.random() * myarray.length),1)[0];}var styles = ["to right", "to bottom right", "-90deg"];function applyChanges(randomColor1, randomColor2) {&nbsp; var randomColor1 = GetValue();&nbsp; var randomColor2 = GetValue();&nbsp; var bg = "";&nbsp; var style = Math.floor(Math.random() * styles.length);&nbsp; bg = "linear-gradient(" + styles[style] + "," + randomColor1 + "," + randomColor2 + ")";&nbsp; $("body").css("background", bg);&nbsp; $("#myInput").text(bg);}function changeBg() {&nbsp; var randomColor1 = GetValue();&nbsp; var randomColor2 = GetValue();&nbsp; applyChanges(randomColor1, randomColor2);}document.getElementById('btn').addEventListener('click', function() {&nbsp; &nbsp; 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>