Question

我对此很陌生。我想在JavaScript中创建一个函数，该函数将允许我通过切换单选按钮并使用addEventListener来更改CSS主体中的线性渐变背景属性。

我想出了这样的东西：

（color1和color2是html中的颜色输入，radio1是四个单选按钮之一）

var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");

function gradientPosition(x) {
    return body.style.background =
    "linear-gradient(to " + x +","
    + color1.value 
    + ", "
    + color2.value
    + ")";
}

当我在控制台中键入并添加参数之一（即）时，此方法有效。 gradientPosition("top");。我的问题是，当我将它与addEventListener一起使用时，它不起作用：

radio1.addEventListener("click", gradientPosition("top"));

我猜这是因为单击本身正在调用该函数，并且参数“ top”不起作用？这种问题的解决方案是什么？或者在这种情况下，我应该只在侦听器内部使用匿名函数吗？

感谢您的时间和理解！：）

Answer 1

您正在调用函数，而不是传递有效的处理程序。您的方法实际上是通过以下字符串作为处理程序传递的：

"linear-gradient(to " + x +"," + color1.value + ", " + color2.value + ")";

您应遵循以下方法：

radio1.addEventListener("click", function(e) {
    gradientPosition("top");
});

如何使用在addEventListener中起作用的参数创建函数？

1 个答案: