输入事件上的 JavaScript 对象值更新答案

【问题标题】：JavaScript object value update on input-event输入事件上的 JavaScript 对象值更新
【发布时间】：2020-07-14 14:19:29
【问题描述】：

到目前为止，以下代码并未更新errorMessages 常量的email.value.length 的值。这个想法是显示剩余的字符数量以返回true；

提前致谢；

const email = document.getElementById("mce-EMAIL");

const errorMessages = {
  typeMismatch: 'I am expecting an e-mail address!',
  valueMissing: 'You need to enter an e-mail address',
  tooShort: `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }`
};

function displayErrorMessage(errorMessage) {
  return errorMessages[errorMessage];
}

const typeCheck = (onValue) => {
  let typeMismatch, valueMissing, tooShort;
  
  typeMismatch = (onValue.validity.typeMismatch) ? displayErrorMessage('typeMismatch') : true;
  valueMissing = (onValue.validity.valueMissing) ? displayErrorMessage('valueMissing') : true;
  tooShort = (onValue.validity.tooShort) ? displayErrorMessage('tooShort') : true;
  
  return false;
}

email.addEventListener('input', (event) => {
  typeCheck(event.explicitOriginalTarget);
});

【问题讨论】：

标签： javascript constants

【解决方案1】：

如果您提供 html，会更容易找出您的期望。 ;o)

它的样子：您最初在函数中定义了 const errorMessages。这意味着它永远不会更新其中的值。

将你的 const 放入 displayErrorMessage() 函数中，它就会起作用。

function displayErrorMessage(errorMessage) {
    const errorMessages = {
        typeMismatch: 'I am expecting an e-mail address!',
        valueMissing: 'You need to enter an e-mail address',
        tooShort: `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }`
    };
    return errorMessages[errorMessage];
}

这是一个工作示例：

const email = document.getElementById("mce-EMAIL");
const output = document.getElementById("output");


function displayErrorMessage(errorMessage) {

const errorMessages = {
  typeMismatch: 'I am expecting an e-mail address!',
  valueMissing: 'You need to enter an e-mail address',
  tooShort: `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }`
};

output.innerHTML = errorMessages[errorMessage];

  return errorMessages[errorMessage];
}

const typeCheck = (onValue) => {
  let typeMismatch, valueMissing, tooShort;
  
  typeMismatch = (onValue.validity.typeMismatch) ? displayErrorMessage('typeMismatch') : true;
  valueMissing = (onValue.validity.valueMissing) ? displayErrorMessage('valueMissing') : true;
  tooShort = (onValue.validity.tooShort) ? displayErrorMessage('tooShort') : true;
  
  return false;
}

email.addEventListener('input', (event) => {
  typeCheck(event.explicitOriginalTarget);
});

<div class="container">
  <input type="email" id="mce-EMAIL" minlength="10">
</div>
<div id="output"></div>

【讨论】：