將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.getElementById('contactNameAdd').value !== '' || document.getElementById('contactPhoneAdd').value !== '') {
    document.getElementById('contactForm').style.display = 'block';
}

在普通的javascript中，您使用document.getElementById（'id'）來基於id屬性獲取DOM節點。 您在DOM Input元素上使用.value來獲取其值。 並且您在任何DOM元素上使用.style來設置css屬性。 在這種情況下，“show”表示“display：block;”。

Answer 3

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

試試這個 - 檢查2個值然后更改'contactForm'的style.display屬性

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