时间戳

首页 > 解决方案 > For 循环将限定元素 ID 传递给另一个函数，但在该函数中，它是整个 HTML 元素而不仅仅是 ID，为什么？

javascript - For 循环将限定元素 ID 传递给另一个函数，但在该函数中，它是整个 HTML 元素而不仅仅是 ID，为什么？

问题描述

我有两个功能，第一个检查具有所需属性且为空的所有字段。如果这是真的，一个“toast”（来自 Materialize CSS）会通知用户 X 字段是必需的，并提供一个链接来关注该字段，单击该链接时会关注该字段。

我已经让它工作了，但我对为什么它甚至以它的方式工作感到困惑。我将bugElems[i].id传递给第二个函数，当我在第一个函数中记录它时，它显示了我的期望：我正在查看的元素的 ID。当我从第二个函数记录参数时，它会向我显示整个 HTML 元素本身及其所有属性，而不仅仅是 ID，正如我所期望的那样。我觉得我是多余的，但这就是 Javascript 似乎想要的。

function validateFields() {
  var bugForm = document.getElementById("bugForm");
  var bugElems = bugForm.elements;
  for (i = 0; i < bugElems.length; i++){
    if(bugElems[i].value === '' && bugElems[i].hasAttribute('required')){
      M.toast({
        html: bugElems[i].previousElementSibling.innerHTML + ' is required' + '<button class="btn-flat toast-action" onclick="toastFocus(' + bugElems[i].id + ')">Goto</button>',
        displayLength: 5000
      });
      console.log(bugElems[i].id,bugElems[i]);
    };
  }
}

function toastFocus(e) {
  console.log(e.id,e);
  document.getElementById(e.id).focus();
}

validateFields()函数中的日志显示如下：

caseNumber <input type="text" id="caseNumber" required="">

toastFocus()函数下的日志显示完全相同：

caseNumber <input type="text" id="caseNumber" required="">

同样，我让它在当前迭代中按我想要的方式工作，但我不明白它为什么工作。我将bugElems[i].id传递给toastFocus，然后不得不再次询问 ID，因为它给了我其他东西。请帮我理解，谢谢。

编辑：

我不断修改并将代码更改为三个函数，使其第一个 toast 没有按钮和自动对焦（再次，一切都按预期工作）。那个似乎像我期望的那样传递了元素 ID，但它没有包含在 Materialize CSS 对象 HTML thing-a-ma-jig 中。整个混乱现在看起来像这样：

function validateFields() {
  var bugForm = document.getElementById("bugForm");
  var bugElems = bugForm.elements;
  var x = 0;

  M.Toast.dismissAll();

  for (i = 0; i < bugElems.length; i++){
    if(bugElems[i].value === '' && bugElems[i].hasAttribute('required')){
      if(x == 0){
        M.toast({
          html: bugElems[i].previousElementSibling.innerHTML + ' is required',
          displayLength: 5000
          });
        toastFocus(bugElems[i].id);
        x++;
      } else {
        M.toast({
          html: bugElems[i].previousElementSibling.innerHTML + ' is required' + '<button class="btn-flat toast-action" onclick="toastFocusClick(' + bugElems[i].id + ')">Goto</button>',
          displayLength: 5000
        });
      }
    };
  }
}

function toastFocus(f) {
  document.getElementById(f).focus();
}

function toastFocusClick(e) {
  M.Toast.dismissAll();
  document.getElementById(e.id).focus();
}

标签： javascripthtmlmaterializetoast

解决方案

在您的示例中，validateFields()和 toastFocus()函数的日志显示相同的元素，但是您说：

我将 bugElems[i].id 传递给 toastFocus，然后不得不再次询问 ID，因为它给了我其他东西。

你能澄清一下吗？

推荐阅读