首页 > 解决方案 > 如何从用户那里获取颜色输入并相应地更改 WIX 元素的颜色?

问题描述

这是我到目前为止一直在应用的代码,但它不起作用。

$w.onReady(function () {

    const bigBox = $w('#box0');
    const firstCircle = $w('#box1');
    const secondCircle = $w('#box2');
    const thirdCircle = $w('#box3');
    const fourthCircle = $w('#box4');
    const fifthCircle = $w('#box5');
    

    
  const changeBoxBtn = $w('#changeBox');
  const colorInput = $w('#input2') ;

    changeBoxBtn.onClick(event => {
  bigBox.style.backgroundColor = 'colorInput';
  bigBox.style.borderColor = 'colorInput';
});

请参阅图像以查看 wix 编辑器视图

标签: javascriptvelo

解决方案


我们在您的问题中遗漏了一些大局,但无论如何我都会尽力回答。

在您onClick中,您将背景颜色设置为文字字符串。那不是你想要的。你可能想做更多这样的事情:

bigBox.style.backgroundColor = $w('#colorInput').value;
bigBox.style.borderColor = $w('#colorInput').value;

当然,您依赖于人们输入有效的颜色名称。您可能需要考虑使用下拉菜单或类似的东西,而不是开放式文本输入。


推荐阅读