Javascript Introduction Part 3

Single/Multiple Elements

  
//Single Element
document.getElementById("contact");
document.querySelecter("contact");

//Multiple Element
document.querySelecterAll("contact");
document.getElementByClassName("contact");
document.getElementByTagName("li");

  

DOM Manipulation uisng JS

    //Manipulating DOM Elements

const h1 = document.getElementById("contact");
h1.innerText = "Change value";

h1.textContent = "Change value";

h1.innerHtml = "
Contact
";
    

Events

//Event in Javascript
const btn = document.getElementById("button");

btn.addEventlistener("click",(e)=>{
	console.log(e);
	console.log("click");
})

Form Validation

  //Form validation

const myForm = document.querySelecter("form");
const name = document.getElementById("name");
const email = document.getElementById("email");
const msg = document.querySelecter("msg");

myForm.addEventlistener("submit",onSubmit);

function onSubmit(e){
	e.preventDefault();
	if(name.value === '' || email.value === ''){
		alert("Value Required");
	}
	else{
		let ulElement = document.getElementById("contact_Id");
		let li = document.createElement("li");
		li.appendChild(document.createTextNode(`${name.value} | ${name.value}`));
		ulElement.appendChild(li);
	}
}