Wie wird die Fehlermeldung zurückgesetzt, nachdem die Taste gedrückt wurde?

Question

Ich lerne gerade JavaScript und arbeite an einer Pseudo-Adoptionsseite. Super einfaches Layout und Funktionalität bis auf ein Problem. Ich habe eine Fehlermeldung, die angezeigt wird, wenn die Schaltfläche "Senden" gedrückt wird und der Benutzer versucht, ein Haustier zur Adoption einzureichen, ohne auf das Feld "Bedingungen" zu klicken. Der Fehler tritt auf, aber wenn ich erneut auf die Schaltfläche klicke (ohne das Kontrollkästchen für allgemeine Geschäftsbedingungen zu aktivieren), ist es so, als ob der Fehler nur eine weitere Fehlermeldung anhängt.

Ich versuche es zu bekommen, wo es keine andere Fehlermeldung erstellen wird. Ich habe versucht, die Variable alertMessage am Ende der Funktion auf eine leere Zeichenfolge zu setzen, in der Hoffnung, dass sie sich selbst zurücksetzt, aber das funktioniert nicht.

Vielen Dank im Voraus für Ihre Hilfe.

$('#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

Der einfachste Weg ist innerHTML DOM-Element-Eigenschaft verwenden Knotens Inhalt aufzuräumen:

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); 
    } 

Aber ich würde benutzen Sie einfach:

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

Und alle Stile für termsLabel Element sollte über deklariert werden CSS in einer Weise, wie

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

UPD Hier ist die Fiedler befriedigend neuen Anforderungen: https://jsfiddle.net/yy1z75e7/2/

Answer 2

Jedes Mal, wenn Sie auf die Schaltfläche klicken und der Code in der else-Klausel ausgeführt wird, erstellen Sie neue Elemente. Was Sie stattdessen tun möchten, ist zu überprüfen, ob das Element, von dem z. B. terminalsLabel sprechen kann, zuerst erstellt wird, und wenn es dann seine innerHtml- oder Textwerte ändert, und wenn dies nicht der Fall ist, dann erstellen Sie stattdessen das Element.

Answer 3

Deaktivieren Sie das Element vor der Alarmmeldung

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

Anfügen oder wenn die Spanne ihm eine Klasse oder id geben zu schaffen, und dann termsLabel überprüfen, um zu sehen, ob es hat schon die Spannweite. Wenn es das nicht schafft, dann tu nichts.

//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); 
} 

Dies gibt Ihnen auch die Möglichkeit, die Nachricht zu entfernen sowie

document.querySelector('.errorMessage').remove()