按下按鈕後如何重置錯誤信息？

我目前正在學習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 = ''; 
    } 
});

來源

2017-11-04 andrewlundy

最簡單的方法是使用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/

來源

2017-11-04 00:27:23 dhilt

dhilt的能力，感謝你的更新。我試過這個，最後把條款標籤拿出來，我需要它。我需要警報在條目標籤下彈出。我認爲創建alertMessage，然後將它作爲子項添加到術語標籤將執行的操作，但它最終只是重複地重新創建錯誤消息。我嘗試設置alertMessage.innerHTML ='';併發生相同的行爲。 – andrewlundy

我相信，你試圖解決的問題很容易，如果你想創建一個[plunker]（https://plnkr.co/edit/）或[fiddle]（https：// jsfiddle .net /）或其他任何演示。 – dhilt

dhilt，在這裏你去！ https://jsfiddle.net/cg1wkLh2/ – andrewlundy

每次單擊該按鈕並執行else子句中的代碼時，都會創建新元素。你想要做的就是檢查元素termsLabel先說，是否先創建，如果是，然後更改它的innerHtml或文本值，如果它不是，則創建該元素。

來源

2017-11-04 00:26:39 8bit

清除元素追加警報消息

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

或創建的跨度時，給它一個類或ID，然後檢查termsLabel，看它是否之前已經有了跨度。如果它不創建它，否則不要做任何事情。

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

這也使您能夠刪除該消息以及

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

來源

2017-11-04 00:30:09

按下按鈕後如何重置錯誤信息？

回答

相關問題