Do you want to learn more about JavaScript and how elements work. They are objects which can hold values just like any other objects in JavaScript. The three exercises below will demonstrate creating page elements with JavaScript, how to add values to the element objects, and how to update page elements. There is also an exercise on how they work with the page element objects, and the difference between function expressions and function declarations.
Web page dynamic welcome message
Create a page welcome message :
- Get the user name in the input field
- When the button is pressed add an event that get the user name and creates a welcome message on the page
- Add a check to ensure the length of the input is larger than 3 characters long
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Course</title>
</head>
<body>
<div class=”output”>What is you name?</div>
<input type=”text” name=”userName”>
<button>Submit</button>
<script src=”app.js”></script>
</body>
</html>
const output = document.querySelector(‘.output’);
const userVal = document.querySelector(‘input[name=”userName”]’);
const btn = document.querySelector(‘button’);
userVal.style.borderColor = ‘#333’;
btn.onclick = ()=>{
if(userVal.value.length > 3){
const message = `Welcome to the site ${userVal.value}`;
output.textContent = message;
userVal.style.display = ‘none’;
btn.style.display = ‘none’;
}
else{
output.textContent = ‘Name length must be 3+ characters’;
userVal.style.borderColor = ‘red’;
}
}
Function Expression vs Function Declaration This Counter
Create 3 page counters using different functions, expression, declaration and arrow format. Counters will all work independently as the value of the total is contained within the instance of the function object using this.
Page counters with functions :
- Select all the page buttons
- Create a function expression that will increment the counter on button press
- Create a function expression with the arrow format that will track and increment the count on the page
- Create a function declaration that will track and increment the count on the page.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Course</title>
</head>
<body>
<div class=”output”></div>
<button class=”btn1″>Adder 1</button>
<button class=”btn2″>Adder 2</button>
<button class=”btn3″>Adder 3</button>
<script src=”app1.js”></script>
</body>
</html>
const btn1 = document.querySelector(‘.btn1’);
const btn2 = document.querySelector(‘.btn2’);
const btn3 = document.querySelector(‘.btn3’);
const output = document.querySelector(‘.output’);
//Function Expression
const adder2 = function(){
if(!this.total) {
this.total = 1;
}else{
this.total++;
}
output.textContent = `Total #2 : (${this.total})`;
}
const adder3 = ()=>{
if(!this.total) {
this.total = 1;
}else{
this.total++;
}
output.textContent = `Total #3 : (${this.total})`;
}
btn1.onclick = adder1;
btn2.onclick = adder2;
btn3.onclick = adder3;
///Function Declaration
function adder1(){
if(!this.total) {
this.total = 1;
}else{
this.total++;
}
output.textContent = `Total #1 : (${this.total})`;
}
Dynamic JavaScript DOM page counters Element Objects examples
Dynamically create page buttons that can be used to count totals separately. Create a button to output all the result totals. Only using JavaScript NO HTML elements
Dynamic Page counters with JavaScript :
- Create a global object to set the number of buttons to be created
- Create a main page element that will contain all the new elements
- Create a function to create page elements, adding the element type to a parent object. Include a parameter in the function for the inner content of the element.
- Loop through and create all the buttons, set a default total of 0 for each one. On click create a function that will update and output the current value of this element total. You can add styling to the buttons
- Add a class of “btn” to each new button so that they can be distinguished from the main total tally button. Create a button that will output all the current button total results.
- When the tally button is clicked create a function that will select all the elements with a class of “btn” and loop through them.
- For each element with the class of “btn” create a new list item element, output that into an unordered list on the main page. The list item contents should show the element total and the element textContent. You can also select the style to match the button style property values.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Course</title>
</head>
<body>
<script src=”app2.js”></script>
</body>
</html>
const val = {
num : 2
};
const main = elemaker(‘div’,document.body,”);
const output = elemaker(‘div’,main,”);
for(let i=0;i<val.num;i++){
const btn = elemaker(‘button’,main,`Button #${i+1}`);
btn.total = 0;
btn.style.backgroundColor = ‘#’+Math.random().toString(16).slice(2,8);
btn.style.color = ‘white’;
btn.classList.add(‘btn’);
btn.onclick = adder;
}
const output1 = elemaker(‘div’,main,”);
const btnMain = elemaker(‘button’,main,`All Totals`);
btnMain.onclick = ()=>{
const btns = document.querySelectorAll(‘.btn’);
output1.innerHTML = ”;
const ul = elemaker(‘ul’,output1,”);
btns.forEach((ele,index)=>{
const li = elemaker(‘li’,ul,`${ele.textContent} = ${ele.total}`);
li.style.backgroundColor = ele.style.backgroundColor;
li.style.color = ele.style.color;
})
}
function elemaker(eleT,parent,html){
const ele = document.createElement(eleT);
ele.innerHTML = html;
return parent.appendChild(ele);
}
function adder(e){
this.total++;
output.style.backgroundColor= this.style.backgroundColor;
output.innerHTML = `${this.textContent} :(${this.total})`;
}