Version 1.0.1-16

t1a09-Functions-by-Fer.html

Example Functions code

                function myGrabNumber(){
                    return parseInt(document.getElementById('myText01').value)
                }
            

Example working code

Time for some personal examples:

First, the code for the button that changes the light mode of this page is a function

                function lightMode() {
                    var element = document.body;
                    element.classList.toggle("light-mode");        
                }
            

Second, every button in the "decisions" assignment triggers a function

Hint: do you celebrate the towel day?

                function ex01() {
                    let myIn02 = parseFloat(document.getElementById('myNum02').value);
                    let myMod01 = myIn02 % 2;
                    if (myIn02 == 42) {
                        document.getElementById('myDiv02').innerHTML = 'Hey!! You found the meaning of life, the universe, and everything! You are awesome. By the way, this number is even';
                    } else if (myIn02 == 69) {
                        document.getElementById('myDiv02').innerHTML = 'This number is odd, BTW, nice';
                    } else if (myMod01 == 0) {
                        document.getElementById('myDiv02').innerHTML = 'This number is even';
                    }else{
                        document.getElementById('myDiv02').innerHTML = 'This number is odd';
                    }
                }
            

                function ex02() {
                    var name = document.getElementById('myName01').value;       
                    var boyName = ['Michael', 'John', 'Chris', 'David', 'Mike', 'Ryan', 'Matt', 'Jason', 'Brian', 'Andrew'];
                    var girlName = ['Olivia', 'Emma', 'Amelia', 'Ava', 'Sophia', 'Charlote', 'Isabella', 'Mia', 'Luna', 'Harper', 'Mary'];
                    if (boyName.includes(name) || girlName.includes(name)) {
                        document.getElementById('myDiv03').innerHTML = 'Pretty common name, we like it!';
                    } else if (name == 'Ellis' || name == 'Jeremy') {
                        document.getElementById('myDiv03').innerHTML = 'Well come, Mr.Ellis. We hope you find the marking a pleasant experience.'; 
                    } else if (name == 'Fernando' || name == 'Fer') {
                        document.getElementById('myDiv03').innerHTML = 'Hello, dad.';
                    } else {
                        document.getElementById('myDiv03').innerHTML = 'Unusual! We like it!';
                    }
                }
            

                function ex04() {
                    var myNumToChange = parseFloat(document.getElementById('myNumToChange').value)
                    if (document.getElementById('next').checked) {
                        myNumToChange = myNumToChange + 1
                        document.getElementById('myDiv05').innerHTML = myNumToChange
                    } else {
                        myNumToChange = myNumToChange - 1
                        document.getElementById('myDiv05').innerHTML = myNumToChange
                    }
                }
            

Third, in the "CSS" assignment, the are a few functions

                function changeColor() {
                    document.getElementById('myB1').style.color = "red"
                    document.getElementById('myB1').style.backgroundColor = "yellow"
                } 
            

                function moveTA() {
                    document.getElementById('myTA01').style.left = parseInt(document.getElementById('myTA01').style.left) + 10 + 'px';
                }
            

Forth, in the "Variables" assignment, there are lots of functions

                //Example 04
            document.myPoints04 = 0;
            document.myBallonsExploted04 = 0;
            function plus5Points() {
                document.myBallonsExploted04 += 1;
                document.myPoints04 += 5;
                document.getElementById('myDiv04').innerHTML = 'You have exploted ' + document.myBallonsExploted04 + ' ballons, and you have a punctuation of ' + document.myPoints04;
            } 
            function plus10Points() {
                document.myBallonsExploted04 += 1;
                document.myPoints04 += 10;
                document.getElementById('myDiv04').innerHTML = 'You have exploted ' + document.myBallonsExploted04 + ' ballons, and you have a punctuation of ' + document.myPoints04;
            }     
            function clearVariables04() {
            	document.myBallonsExploted04 = 0;
                document.myPoints04 = 0;
                document.getElementById('myDiv04').innerHTML = 'Hit a ballon to start';
            }
            

                //Example 05
            document.myMultiplier05 = 1;
            document.myBadGuyPoints05 = 0;
            function addStandartP05() {
                document.myMultiplier05 = 1;
                document.getElementById('myMultiplierDiv05').innerHTML = 'You have Standart multiplier';
            }
            function addX2P05() {
                document.myMultiplier05 = 2;
                document.getElementById('myMultiplierDiv05').innerHTML = 'You have x2 multiplier';
            }
            function add50PerP05() {
                myTemp05 = Math.random();
                if (myTemp05 < 0.5) {
                    document.myMultiplier05 = 4;
                } else {
                    document.myMultiplier05 = -2;
                }
                document.getElementById('myMultiplierDiv05').innerHTML = 'You have a secret multiplier. Would you dare?';
            }
            function hitBadGuy05() {
                document.myBadGuyPoints05 += 2 * document.myMultiplier05;
                if (document.myMultiplier05 == -2) {
                    document.getElementById('myDiv05').innerHTML = 'Oh no! that was a good guy. Your punctuation is: ' + document.myBadGuyPoints05;
                } else if (document.myMultiplier05 == 4) {
                    document.getElementById('myDiv05').innerHTML = 'Hey! Now your are helping them become a better person!. Your punctuation is: ' + document.myBadGuyPoints05;
                } else {
                    document.getElementById('myDiv05').innerHTML = 'Your punctuation is: ' + document.myBadGuyPoints05;
                }
            }
            function hitVeryBadGuy05() {
                document.myBadGuyPoints05 += 5 * document.myMultiplier05;
                if (document.myMultiplier05 == -2) {
                    document.getElementById('myDiv05').innerHTML = 'Oh no! that was a very good guy. Your punctuation is: ' + document.myBadGuyPoints05;
                } else if (document.myMultiplier05 == 4) {
                    document.getElementById('myDiv05').innerHTML = 'Hey! Now your are helping them become a better person!. Your punctuation is: ' + document.myBadGuyPoints05;
                } else {
                    document.getElementById('myDiv05').innerHTML = 'Your punctuation is: ' + document.myBadGuyPoints05;
                }
            }
            function clearVariables05() {
                document.myBadGuyPoints05 = 0;
                document.getElementById('myDiv05').innerHTML = 'Hit a bad guy to start...';
            }