將jQuery翻譯爲純javascript

Question

我必須修復一些表單驗證，但主機頁面中沒有包含jQuery。我通常會做這樣的事情...

if ($("#contactNameAdd").val() !== '' || $("#contactPhoneAdd").val() !== '') { 
    $("#contactForm").show() 
}; 

我怎麼能重寫在正常的js？

Answer 1

var name = document.getElementById("contactNameAdd"); 
var phone = document.getElementById("contactPhoneAdd"); 
var form = document.getElementById("contactForm"); 

if(name.value != '' || phone.value != '') { 
    form.style.display = "block"; 
} 

Answer 2

if (document.getElemenById('contactNameAdd').value != '' || document.getElementById('contactPhoneAdd').value != '') { 
    document.getElementById('contactForm').style.display = 'block'; 
} 

試試這個 - 檢查2倍的值，然後改變 '聯繫形式'

Answer 3

if (document.getElementById('contactNameAdd').value !== '' || document.getElementById('contactPhoneAdd').value !== '') { 
    document.getElementById('contactForm').style.display = 'block'; 
} 

在普通的JavaScript，您使用document.getElementById('id')獲得DOM的將style.display屬性基於節點id屬性。您使用DOM輸入元素上的.value來獲取其值。並且您在任何DOM元素上使用.style來設置CSS屬性。在這種情況下，「show」的意思是「display：block;」。

Answer 4

這應該可以做到。

var contactNameAdd = document.getElementById("contactNameAdd"); 
var contactPhoneAdd = document.getElementById("contactPhoneAdd"); 

if((contactNameAdd !== null && contactNameAdd.value !== '') || (contactPhoneAdd !== null && contactPhoneAdd.value !== '')) 
{ 
    document.getElementById("contactForm").style.display = 'block'; 
} 

Answer 5

var contactName = document.getElementById('contactNameAdd'); 
var contactPhone = document.getElementById('contactPhoneAdd'); 
if(contactName.value !== '' || contactPhone.value !== '') { 
    // Different as JQuery, there will be no animation. 
    // I assume you use 'display:none' to hide the form. 
    var form = document.getElementById('contactForm'); 
    form.style.display = 'block'; 
}