Question

我目前正在学习JavaScript，而且我正在开发一个模拟宠物收养网站。除一个问题外，超级简单的布局和功能。当按下“提交”按钮并且用户尝试提交宠物以供采用而不单击“条款和条件”框时，我会显示一条错误消息。出现错误，但如果我再次单击该按钮（不检查条款和条件复选框），就像错误只是附加了另一条错误消息。

我试图在不会创建其他错误消息的地方获取它。我已经尝试将alertMessage变量设置为函数末尾的空字符串，希望它重置自己，但这不起作用。

提前感谢您的所有帮助。

$('#add-pet').on('click', function() {

  if (termsBox.checked) {
  // Grab info from the form
  let $name = $('#pet-name');
  let $species = $('#pet-species');
  let $notes = $('#pet-notes');

  // Assemble the HTML of our new element with the above variables
  let $newPet = $(
    '<section class="six columns"><div class="card"><p><strong>Name:</strong> ' + $name.val() +
    '</p><p><strong>Species:</strong> ' + $species.val() + 
    '</p><p><strong>Notes:</strong> ' + $notes.val() + 
    '</p><span class="close">&times;</span></div></section>'
  );
  // Attach the element to the page
  $('#posted-pets').append($newPet);

  // Make the 'x' in the corner remove the section it's contained within
  $('.close').on('click', function() {
      $(this).parents('section').remove();
  });

  // Reset form fields
  $name.val('');
  $species.val('Dog');
  $notes.val('');

  } else {
    let br = document.createElement('BR');
    let alertMessage = document.createTextNode('Please read the terms and conditions.');
    let span = document.createElement('SPAN');
    span.style.color = '#FF0000';
    span.appendChild(alertMessage);
    let termsLabel = document.getElementById('termsLabel');
    termsLabel.appendChild(br);
    termsLabel.appendChild(span);
    alertMessage = '';
  }
});

Answer 1

最简单的方法是使用innerHTML DOM元素属性来清理节点的内容：

else {
    let br = document.createElement('BR');
    let alertMessage = document.createTextNode('Please read the terms and conditions.');
    let span = document.createElement('SPAN');
    span.style.color = '#FF0000';
    span.appendChild(alertMessage);
    let termsLabel = document.getElementById('termsLabel');
    termsLabel.innerHTML = ''; // this removes previous content of the node including all it's children
    termsLabel.appendChild(br);
    termsLabel.appendChild(span);
  }

但我会用：

else {
  let termsLabel = document.getElementById('termsLabel');
  termsLabel.innerHTML = 'Please read the terms and conditions.';
}

termsLabel元素的所有样式都应该通过CSS以类似

的方式声明

#termsLabel {
  margin-top: 15px;
  color: red;
}

UPD 这里有小提琴手满足新要求：https://jsfiddle.net/yy1z75e7/2/

Answer 2

在附加警报消息之前清除元素

man(beto).
man(fransisco).
man(alberto).
man(jaime).
man(manolo).
man(nolo).
man(lito).
man(manuel).
man(erick).
man(jesu).
man(jesus).
woman(emi).
woman(harumi).
woman(haru).
woman(yuneisi).
woman(yasmeli).
woman(mioara).
woman(elia).
woman(iza).
woman(alice).
woman(ofelia).
woman(arlet).
parent(manuel, alberto).
parent(ofelia, alberto).
parent(manuel, jaime).
parent(ofelia, jaime).
parent(manuel, manolo).
parent(ofelia, manolo).
parent(alberto, erick).
parent(alberto, beto).
parent(alberto, fransisco).
parent(emi, erick).
parent(emi, beto).
parent(manolo, nolo).
parent(manolo, arlet).
parent(nolo, lito).
parent(iza, lito).
parent(mioara, yuneisi).
parent(mioara, yasmeli).
parent(jaime, yuneisi).
parent(jaime, yasmeli).
parent(jesus_padre, jesu)
parent(jesus_padre, alice).
parent(jesus_padre, haru).
parent(harumi, haru).
parent(harumi, jesu).
parent(harumi, alice).
father(X,Y) :- parent(X,Y), man(X).
mother(X,Y) :- parent(X,Y), woman(X).
brother(X,Y) :- man(X), parent(F, X), parent(F, Y).
sister(X,Y) :- woman(X), parent(P, X), parent(P, Y).
grandpa(X,Y) :- father(F,Y), father(X,F), man(X).
grandma(X,Y) :- father(F,Y), mother(X,F), woman(X).
son(X,Y) :- father(Y,X), man(X).
nephew(X,Y) :- father(F,X), brother(F,Y).

或者在创建span时给它一个类或id，然后检查termsLabel以查看它是否已有span。如果它没有创建它，否则什么都不做。

termsLabel.innerHTML = '';
termsLabel.appendChild(br);
termsLabel.appendChild(span);

这也使您能够删除消息

//cache this so you don't keep needing to call it over and over
let termsLabel = document.getElementById('termsLabel');

//querySelector() will return null if the span isn't in termsLabel
if(!termsLabel.querySelector('.errorMessage')){
  let br = document.createElement('BR');
  let alertMessage = document.createTextNode('Please read the terms and conditions.');
  let span = document.createElement('SPAN');
  span.style.color = '#FF0000';
  span.classList.add("errorMessage");
  span.appendChild(alertMessage);
  termsLabel.appendChild(br);
  termsLabel.appendChild(span);
}

Answer 3

每次单击该按钮，并执行else子句中的代码时，您将创建新元素。你要做的是检查是否首先创建了elementsLabel所说的元素，如果是，则更改其innerHtml或文本值，如果它不是，则改为创建元素。

如何在按下按钮后重置错误消息？

3 个答案: