For循环将合格元素ID传递给另一个函数,但是在该函数中,它是整个HTML元素而不仅仅是ID,为什么?

问题描述 投票:0回答:1

我有两个功能,第一个检查具有必需属性且为空的所有字段。如果是这样,“ 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,因为它给了我其他东西。请帮助我理解,谢谢。

编辑:

我一直在进行修改,并将代码稍微更改为三个功能,以使第一个吐司没有按钮和自动对焦功能(再次,所有功能仍可按需运行)。那个似乎传递了元素ID,正如我期望的那样,但是它没有包装在Materialize CSS对象HTML的东西中。现在整个混乱看起来像这样:

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();
}
javascript html materialize toast
1个回答
0
投票

在您的示例中,validateFields()toastFocus()函数的日志显示相同的元素,但随后您说:

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

你能澄清这个吗?

© www.soinside.com 2019 - 2024. All rights reserved.