dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Rookie javascript question

  1. #1
    Join Date
    Mar 2017
    Posts
    2

    Rookie javascript question

    I'm having an issue getting my Button to work. When I comment out the elButton.onclick and refresh the page I can see the output change however when I add the button back in I have a clickable button that does nothing.. I am studying software development cross-training over from mechanical engineering. I am new to this forum recommended by my instructor. Any help would be appreciated, Thank You.

    <!doctype html>
    <html lang="en">
    <head>

    <meta charset="utf-8">
    <title>Swami Random Fortune*Display</title>
    <style>

    #output {
    width: 400px;
    height: 400px;
    color:#DAA520;
    background-color: cornflowerblue;
    border-radius: 19px;
    box-shadow: 5px 5px 10px red;
    margin: 20px auto;
    font-style: bold;
    font-size:2em;
    text-align: center;

    }



    </style>
    </head>

    <body>

    <div id= "output">
    <br>

    <input id="button" type="button" value="See Your Future Career!">
    </div>



    <script>


    var output = document.getElementById("output");
    var elButton = document.getElementById("button");
    var tech = [ "Networking", "Robotics", "Info Technology", "Cyber Security", "Nano Technology", "Software Development", "Technopunking"];
    var randomIndex;
    var randomCourse;

    //elButton.onclick = getRandom(min,max);

    function getRandom(min,max) {

    return Math.floor(Math.random() * (max - min + 1) ) + min;

    }

    randomIndex = getRandom(0, tech.length-1);

    randomCourse = tech[ randomIndex ];

    output.innerHTML = "I really think that you would be great at: <br><br> " + randomCourse;







    </script>

    </body>

    </html>

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,446
    1. when posting code, use forum BBcode tags, it helps everyone.

    2. if you are using a button, you are better off setting the click event in HTML eg.<input name="myButtonName" tyoe="button" value="myClickValue" onclick="myFunctionToCall();">

    3. all arrays start at zero and adding 1 to the random number sequence will never produce a result of "Networking" because you have skewed the value and random numbers are best found in this case as a simpler function like [code]function getRandom( maxVal ) {
    return ~~( Math.random() * maxVal) | 0;}[code] using bitwise operations to return a number 0 to maxVal.

    4. <!doctype html> needs to be <!DOCTYPE html> as !doctype is not recognised in browsers except HTML5 and for safety you should avoid older browsers using quirks mode where strange behaviour can be introduced, the long standing argument by some are that it doesn't matter when it actually does.


    So putting a few changes together...
    Code:
    function getRandom( maxVal ) {
    	return ~~( Math.random() * maxVal) | 0;
    }
    function choose(){
    	var target = document.getElementById("output");
    	target.innerHTML = "I really think that you would be great at: <br><br> " + tech[ getRandom( tech.length );
    }
    tech = [ "Networking", "Robotics", "Info Technology", "Cyber Security", "Nano Technology", "Software Development", "Technopunking"];
    HTML Code:
    <input name="button" type="button" value="See Your Future Career!" onclick="choose();">
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Mar 2017
    Posts
    2

    Red face

    Quote Originally Posted by \\.\ View Post
    1. when posting code, use forum BBcode tags, it helps everyone.

    2. if you are using a button, you are better off setting the click event in HTML eg.<input name="myButtonName" tyoe="button" value="myClickValue" onclick="myFunctionToCall();">

    3. all arrays start at zero and adding 1 to the random number sequence will never produce a result of "Networking" because you have skewed the value and random numbers are best found in this case as a simpler function like [code]function getRandom( maxVal ) {
    return ~~( Math.random() * maxVal) | 0;}[code] using bitwise operations to return a number 0 to maxVal.

    4. <!doctype html> needs to be <!DOCTYPE html> as !doctype is not recognised in browsers except HTML5 and for safety you should avoid older browsers using quirks mode where strange behaviour can be introduced, the long standing argument by some are that it doesn't matter when it actually does.


    So putting a few changes together...
    Code:
    function getRandom( maxVal ) {
    	return ~~( Math.random() * maxVal) | 0;
    }
    function choose(){
    	var target = document.getElementById("output");
    	target.innerHTML = "I really think that you would be great at: <br><br> " + tech[ getRandom( tech.length );
    }
    tech = [ "Networking", "Robotics", "Info Technology", "Cyber Security", "Nano Technology", "Software Development", "Technopunking"];
    HTML Code:
    <input name="button" type="button" value="See Your Future Career!" onclick="choose();">

    Wow thank you. Learned a lot, and its working now.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles