NEWS: Total Picture Views: 155282 | Total Article Views: 165608 | Top 5 Most Popular Article: 1. Am I Stuck Algorithm with Becker Robot | 2. PickUpThings with Becker Robot | 3. How to read a JSON and work with it | 4. Encrypted Data GUI (Download .Zip) | 5. Create Wall and Things with Becker

Javascript Example HTML

Description:

In this example I will show you how to use function and do different thing in Javascript.

Code:

<!--index.html -->
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>SHERI the Robot</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div id="main"><h1>SHERI the Robot</h1>

            <button onClick="btn1()" id="btn1">Translate to Canadianese</button><br>
            <button onclick='btn2()' id="btn2">The Coin Game</button><br>
            <button onclick='btn3()' id="btn3">Encode</button><br>
            <button onclick='btn4()' id="btn4">Decode</button><br>
            <button onclick='btn5()' id="btn5">Change My Background</button><br>
            <button onclick='btn6()' id="btn6">Change My Buttons</button>
            <br>
            <br>
        </div>
        <div id="result1"><h2>SHERI says:</h2></div> 
    </body>
</html>

<!--js/script.js -->
/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

function btn1() {
                var P1 = document.getElementById('result1');
                var q1 = prompt("Enter a String that you want to translate");
                var arrayOfStrings = q1.split(" ");
                for (var i = 0; i < arrayOfStrings.length; i++) {
                    if (i != 0) {
                        var resultString = (resultString + arrayOfStrings[i] + "eh ");
                    } else {
                        var resultString = (arrayOfStrings[i] + "eh ");
                    }
                }
                P1.innerHTML = "<h2>SHERI says: " + resultString + "</h2>";
            }
            function btn2() {
                //Got a problem with the total so I cheated I bit a the end.
                var num1 = parseInt(prompt("Enter a number between 1 and 7"));
                var num2 = parseInt(prompt("Enter a number between 1 and 7"));
                var P2 = document.getElementById('result1');
                var piggy = new Array();
                var total = 7;
                var randomnumber;
                for (var i = 1; i <= 7; i++) {
                    randomnumber = Math.floor(Math.random() * total);
                    total = (total - randomnumber);
                    console.error("Random number " + randomnumber);
                    piggy[i] = randomnumber;
                    if (i === 7 && randomnumber === 0) {
                        piggy[i] = total;
                    }
                    console.error(i + ". " + piggy[i] + " total = " + total);
                }

                var coin = piggy[num1] + piggy[num2];
                P2.innerHTML = "<h2>SHERI says: You Win " + coin + "</h2>";
                console.error("#1 " + num1);
                console.error("#2 " + num2);
            }
            function btn3() {
                var letter = new Array();
                var lastLetter = new Array();
                var resultString = new Array();
                var result;
                var P1 = document.getElementById('result1');
                var q1 = prompt("Enter a String that you want to encode");
                var arrayOfStrings = q1.split(" ");
                for (var i = 0; i < arrayOfStrings.length; i++) {
                    lastLetter[i] = (arrayOfStrings[i].slice(-1));
                    letter[i] = (arrayOfStrings[i].length);
                    console.error(letter[i]);
                    var word = (lastLetter[i] + arrayOfStrings[i]);
                    resultString[i] = word.slice(0, letter[i]);
                    if (i != 0) {
                        result = result + " " + resultString[i];
                    } else {
                        result = resultString[i]
                    }

                }
                P1.innerHTML = "<h2>SHERI says: " + result + "</h2>";
            }
            function btn4() {
                var letter = new Array();
                var lastLetter = new Array();
                var resultString = new Array();
                var result;
                var P1 = document.getElementById('result1');
                var q1 = prompt("Enter a String that you want to encode");
                var arrayOfStrings = q1.split(" ");
                for (var i = 0; i < arrayOfStrings.length; i++) {
                    lastLetter[i] = (arrayOfStrings[i].slice(0));
                    letter[i] = (arrayOfStrings[i].length);
                    console.error(letter[i]);
                    var word = (arrayOfStrings[i] + lastLetter[i]);
                    resultString[i] = word.slice(1, letter[i] + 1);
                    if (i != 0) {
                        result = result + " " + resultString[i];
                    } else {
                        result = resultString[i]
                    }

                }
                P1.innerHTML = "<h2>SHERI says: " + result + "</h2>";
            }
            function btn5() {
                var color = prompt("What color do you want the background to be?");
                document.body.style.backgroundColor = color;
            }
            function btn6() {
                //Did it that way because it would not work if they are all with the same ID
                var color = prompt("What color do you want the button to be?");
                document.getElementById("btn1").style.backgroundColor = color;
                document.getElementById("btn2").style.backgroundColor = color;
                document.getElementById("btn3").style.backgroundColor = color;
                document.getElementById("btn4").style.backgroundColor = color;
                document.getElementById("btn5").style.backgroundColor = color;
                document.getElementById("btn6").style.backgroundColor = color;

            }

<!--css/style.css -->
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Feb 5, 2014, 6:12:28 PM
    Author     : Jean-Mathieu
*/

#main{
    text-align: center;
}
#btn1,#btn2,#btn3,#btn4,#btn5,#btn6{
    background-color: yellow;
}
#main{
    font-size: 24;
}
h2{
    color: red;
}
Attachments:

Tags: Function onClick For Loop Array Arrays

Total Views: 889

My name is Jean-Mathieu

I created this website so other people could enjoy finding useful stuff easier. If you have any question do not hesitate to contact me.

jean8mathieuCreated on 12/05/14


affiliate_link

Disclosure: We are a website that needs compensation to operate like any other website on the internet.
We may receive consideration for our reviews but we are totally unbiased and do not accept paid reviews or fake reviews claiming to be something they are not.