如何清除跨度的innerHTML

Question

我在 html 中有一个基本表单，当用户留下空白字段时，我会在我通过 javascript 创建的 span 中显示一条消息，到目前为止一切都很好。但是如果我一次又一次点击“提交”按钮，消息就会一次又一次地打印在已经打印的消息之上，我的意思是重叠。

我试过 element.innerHTML = '';和this。也许我执行得不好，因为它不起作用。

var myForm = document.getElementsByTagName('form')[0];
var formFields = document.getElementsByTagName('label');

myForm.addEventListener('submit', function(){
  event.preventDefault(); 
    var statusMessageHTML = [];     
    // create empty spans
    for(i = 0; i < formFields.length; i++){
      statusMessageHTML[i] = document.createElement('span');
        statusMessageHTML[i].className = 'status-field-message';
      formFields[i].appendChild(statusMessageHTML[i]);     
    }
    // print a string in empty spans
    for(i = 0; i < formFields.length; i++){
      statusMessageHTML[i].innerHTML = "Error Message"
    }      
  return false;
});

PD：我想用纯 JavaScript 解决这个问题。

CODEPEN

Answer 1

为了防止这种情况，您可以提前创建并附加那些spans，然后在单击提交按钮时修改它们的文本。

例如，重新排列您的代码如下：

var myForm = document.getElementsByTagName('form')[0];
var formFields = document.getElementsByTagName('label');

// create empty spans in advance
var statusMessageHTML = [];
for(var i = 0; i < formFields.length; i++) {
  statusMessageHTML[i] = document.createElement('span');
  statusMessageHTML[i].className = 'status-field-message';
  formFields[i].appendChild(statusMessageHTML[i]);
}

myForm.addEventListener('submit', function(event) {
  event.preventDefault();
  
  // change the text of spans
  for(var i = 0; i < formFields.length; i++)
    statusMessageHTML[i].textContent = 'Error Message';
});

注意：

• 在使用函数之前，您必须在函数的参数中包含相应的变量名称（即event）。
• 在您的情况下，span.textContent 可能比 span.innerHTML 更可取。
• 在addEventListener的回调函数中返回值是没有意义的。返回的值被简单地丢弃。
• 在使用之前声明所有变量（例如，i）是一种很好的做法。
• 您也可以直接在 HTML 中构造这些 spans，因为它们在结构中是一种“静态”。

更新

如果我理解正确，你更喜欢：

• 在用户第一次提交时创建那些spans 作为占位符。
• 当收到ajax请求的响应时，重写spans中的值。
• 如果多次点击提交按钮，只需清除spans中之前的值即可，后续流程不变。

那么我相信您只需将整个部分包装在 if-else 块中：

var myForm = document.getElementsByTagName('form')[0];
var formFields = document.getElementsByTagName('label');
var statusMessageHTML = [];
var isFirstSubmit = true;

myForm.addEventListener('submit', function(event) {
  event.preventDefault();

  if(isFirstSubmit) {

    // create empty spans
    for(var i = 0; i < formFields.length; i++) {
      statusMessageHTML[i] = document.createElement('span');
      statusMessageHTML[i].className = 'status-field-message';
      formFields[i].appendChild(statusMessageHTML[i]);
    }
    
    isFirstSubmit = false;
    
  } else {
    
    // clear previous values
    for(var i = 0; i < formFields.length; i++)
      statusMessageHTML[i].textContent = '';
      
  }
});

并在收到响应时重写值（可能包装在回调函数中，因为它是 AJAX 请求）：

function callback(response) {
  for(var i = 0; i < formFields.length; i++)
    statusMessageHTML[i].textContent = /*values in response*/;
}