Mandatory Elements To Conduct JavaScript Form Manipulation

[Saul H.]

I have began a collection of 'Mandatory Elements To Conduct JavaScript Form Manipulation'.
-I hope that this can be an accessible aid for individuals that are unfamiliar with the language.

-addEventListener("", varorfunctionName)

1: addEventListener specifies what will transpire when something is conducted by the user. It is a mandatory element to evoke response from user input.

document.getElementById("").addEventListener("click", function() {
}

2: document.getElementById, Tag Name, or Class Name receives information (that will perhaps be manipulated) from a particular element. Computer programmers are fond of changing the innerText, innerHTML, or textContent of these manipulated elements.

var someVar = document.getElementById("that-id");
someVar.textContent = "Hello, world!";

3: The 'var' element is simply assigning something a variable so that it can be referred to in later functions & statements. Atop, I changed the text content of a particular element that possessed an HTML5 Id.

var heyMan = document.getElementByClassName("hi");
if (heyMan === "Hello, Friends") {
heyMan.innerHTML = "Hello, yet again!";
}

4: textContent, innerText, or innerHTML: Of course, these are all entirely different elements! Nonetheless, they all specify something that could undoubtedly possibly be text! textContent specifies merely text, whatever that text might be! innerHTML, of course, relates to nested elements amidst the HTML5 code. innerText specifies text contained in, distinctly, an element, rather than any sentence that you might find amidst HTML5 coding.

coolVar. innerText = "Remarkable. An extraordinary ideal that I will suggest to all of my friends and acquaintances!";

5: function(): If one would like to conduct an occurrence or the result of user input, they would create a function to conduct these things!

function() {
//if, elseif
}

6: if, elseif: If a browser receives particular user information, it might begin a program to institute accessibility to the site. if, the user had a sophisticated understanding of a particular thing, one might like to easily access information regarding these things. if the browser received another solution, something different would happen. This particular programming philosophy would be referred to as 'personalization'.

if (this = "that") {
//This would, of course, be determined by whatever one was trying to accomplish!
}
else if (this = "this") {
//A different ultimate solution.
}

-This is admittedly not a very satisfactory list, and, one can certainly become more familiar and knowledge regarding these things using various academic applications.

 

[VBService]

-addEventListener("", varorfunctionName)

this should be more precision, first parameter

.addEventListener(eventType, varorfunctionName)



BTW,

addEventListener() method
addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)

 

[VBService]

document.querySelector(selectors) and document.querySelectorAll(selectors) can replace all below

• document.getElementById(id)
• document.getElementsByClassName(className)
• document.getElementsByClassName(className className)
• document.getElementsByName(name)
• document.getElementsByTagName(tagName)

 

[VBService]

Code:

var heyMan = document.getElementByClassName("hi");
if (heyMan === "Hello, Friends") {
heyMan.innerHTML = "Hello, yet again!";
}

this example is incorrect

check

<p class="hi">Hello, Friends</p>

<script>
  var heyMan = document.getElementsByClassName("hi");

  if (heyMan[0].textContent == "Hello, Friends") {
    heyMan[0].innerHTML += ". <b>Hello, yet again!</b>";
  }
</script>

or

<p class="hi">Hello, Friends</p>
<p class="hi">Ciao, amici</p>
<p class="hi">Hello, Friends</p>
<p class="ciao">Hello, Friends</p>
<p class="hi">Hola amigos</p>

<script>
  var heyMan = document.getElementsByClassName("hi");

  for (const element of heyMan) {
    if (element.textContent == "Hello, Friends") {
      element.innerHTML += ". <b>Hello, yet again!</b>";
    }
  }
</script>

 

[VBService]

3: The 'var' element is simply assigning something a variable

• Differences Between Var, Let, and Const
• var, const, let... now ‘using’?

 

[VBService]

6: if, elseif: If

don't forget about switch

 

[VBService]

4: textContent, innerText,

don't forget about insertAdjacentText()

or innerHTML

don't forget about insertAdjacentHTML()

 

[Saul H.]

this should be more precision, first parameter

.addEventListener(eventType, varorfunctionName)



BTW,

I was rather lazy! Thus I simply provided 'Mandatory' Elements To Conduct Javascript Form Manipulation.
-Of course, numerous other things could be conducted using different addEventListener phrases, but I was merely including types that viewers where already familiar with and knowledgeable regarding.

-There are better and more accessible applications of which you can acquire this data!