单击按钮时，它应该在打字稿中触发输入单击答案

【问题标题】：when a button is clicked it should fire of an input click in typescript单击按钮时，它应该在打字稿中触发输入单击
【发布时间】：2020-10-31 19:00:24
【问题描述】：

我有一个显示在页面上的颜色选择器，如果您单击它，它会下拉颜色供您选择。

但我想做的是我想隐藏颜色选择器，并且只有在单击按钮时我希望它自动单击颜色选择器以便显示下拉颜色而不是我单击颜色选择器

<button click.delegate="test">Select a Color</button>

<input type="color" id="color"></input>

这是我尝试过的

 <input type="color" id="color" style="display:none"></input>
    test() {
            let color = document.getElementById("color")
              color.style.display = "block";
            if (color instanceof HTMLElement) {
                color.click();
            }
        }

但以上不起作用，它不会调用单击下拉颜色渐变

所以基本上当按钮被点击时，它应该是这样的

【问题讨论】：

好吧，我将您的代码复制到 w3schools 上的示例页面，它实际上是通过修复一些错误来工作的，例如在 "test()" 左侧添加 "function" 关键字。这是截图：imgur.com/a/kuSxlK4 虽然我在 Firefox 上测试过
我正在使用 typescript 和 aurelia，所以它不喜欢那样
对不起，我错过了打字稿部分：/ 你能通过检查来检查浏览器的控制台吗？也许会抛出一些错误。它可能会给你一些想法。

标签： javascript html typescript color-picker

【解决方案1】：

试试这个

function showColorPickerFunc() {
  let el = document.getElementById("color") 
     if (el.onclick) {
       el.onclick();
    } else if (el.click) {
       el.click();
    }
  }
        

showColorPickerFunc();

#color{
  width: 0px;
  opacity: 0;
}

<button onclick="showColorPickerFunc()">Select a Color</button>

<input type="color" id="color"  />

【讨论】：