Question

我正在使用React在JavaScript，HTML和Visual Studio Code中构建更大的应用程序。我正在使用第三方路由器登录我建造的小型机器人。该机器人将使用由combobox和相关button触发的继电器打开，该继电器将应用combobox选择。我也是JavaScript和HTML的新手，因此我学会了如何部署网站，并准备了一个可验证的最小示例，可在此处找到{{3} }和https://comboboxtest.netlify.com/，您也可以根据需要获取源代码。

启动Visual Studio之后，应用程序的目标将是：

1）在路由器内部登录，

2）自动触发组合框，然后

3）使用Apply按钮自动应用组合框选择。

为更好地显示此内容，请参见下面的打印屏幕：

lay-out

问题：为了访问路由器，我没有写一个外部接口，因为它来自路由器。我在界面中导航，并到达Apply代码中的HTML按钮，如下所示：

navigation

因此，操作如下：

1）我使用组合框触发继电器

2），我必须将鼠标悬停在Apply按钮上

3）将鼠标放在按钮上（鼠标悬停时），我可以单击并应用选择

4），该选择应通过声明确认为绿色。

什么不起作用：我可以触发组合框，但是我无法自动悬停并单击“应用”按钮。

在我正在使用的代码的最重要部分下面：

property string get_relay_comboBox: "
      var comboBox = document.getElementsByName('859-2-2')[0];
      // find a target element.
      if (comboBox) {
        // Add event listener for combobox
        comboBox.addEventListener('change', function (e) {
          console.log('Change event detected:', e);
        });
        // Get new option index by flipping the current selected index
        var newIdx = (comboBox.selectedIndex + 1) % 2;
        // set the new index
        comboBox.selectedIndex = newIdx;
        // fire change event
        comboBox.dispatchEvent(new Event('change'));
      }
      else {
        console.error('comboBox not found!');
      }
    ";

property string applyBtn: "
    function fun('btnb btnhov') {
      document.getElementById('btn_Apply').click();
    }
";

到目前为止我尝试过的事情

1）我研究了一段时间，发现了here和this，它们有助于理解如何触发组合框。

2）我右键单击Apply按钮上的路由器界面，打开了Inspect Element菜单，然后转到Show DOM properties，我发现下面的屏幕快照可能会有用：

Show DOM properties

3） following post我曾经了解过HTML部分，实际上，我知道应该以一种很重要的方式调用组件，但仍然无法弄清楚如何使用按钮接受组合框的选择。

4）以下是调用点击事件的基本方法This，我简单地应用了它，因为可以在下面显示它：

    function fun('btnb btnhov') {
      document.getElementById('btn_Apply').click();
    }

但是我没有工作，我认为这时所解释的最重要的问题是如何检测出重复事件，然后之后，按下按钮。该怎么做？

编辑

我还尝试通过以下方式重写该函数：

property string applyBtn: "
    var btnApply = document.getElementById('btn_Apply');
    if(btnApply) {
        // Try add event listener for button
        btnApply.addEventListener('change', function(e) {
            console.log('Change event detected:', e);
        });
      // Push button
      // Here the button should be pushed (or hovered first????)
    }
    else {
        console.error('btnApply not found!');
    }
";

感谢任何可以指导正确方向解决该问题的人。

鼠标悬停在鼠标上后如何自动按按钮

0 个答案: