更新

Question

我在html中有一个基本形式，当用户留下空白字段时，我会通过javascript创建一个跨越的消息，到目前为止一切都很好。但是，如果我点击提交＆＃39;按钮一次又一次地反复打印消息在已打印的消息上方，我的意思是重叠。

我尝试了元素.innerHTML =＆＃39;＆＃39 ;;和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

为防止这种情况发生，您可以提前创建并附加span个，并在单击提交按钮时修改其文本。

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

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中构建span，因为它们在结构中是“静态的”。

更新

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

当用户第一次提交时，将span创建为占位符。

收到ajax请求的响应时，重写span s中的值。

如果多次单击提交按钮，只需清除span中的先前值，并且以下过程保持不变。

然后我相信你只需将整个部分包裹在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*/; }

如何清除内部跨度的HTML

1 个答案:

更新