У меня есть две функции, первая проверяет все поля, которые имеют обязательный атрибут и являются пустыми. Если это правда, то «toast» (из Materialise CSS) уведомляет пользователя о том, что поле X является обязательным, и предоставляет ссылку, чтобы сосредоточиться на этом поле, которое при щелчке фокусируется на поле.
У меня все работает,но я не понимаю, ПОЧЕМУ это работает так, как работает. Я передаю bugElems [i] .id второй функции, и когда я регистрирую ее в первой, она показывает то, что я ожидаю: идентификатор элемента, на который я смотрю. Когда я записываю аргумент из второй функции, он показывает мне весь элемент HTML со всеми его атрибутами, а не только идентификатор, как я ожидаю, он будет работать. Я чувствую себя избыточным, но это то, что 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, потому что он дал мне что-то еще. Пожалуйста, помогите мне понять, спасибо.
Редактировать:
Я продолжал возиться и немного изменил код на три функции, сделав так, чтобы первый тост не имелкнопка и автофокус (опять все работает как хотелось бы еще). Кажется, что этот элемент передает идентификатор элемента, как я и ожидал, но он не обернут в HTML-объект HTML-объекта Materialise. Весь беспорядок теперь выглядит так:
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();
}