CODEWITHSUNDEEP
javascripthtml
user3043051
user3043051

Reputation: 35

Better way to apply javascript scripts

Hello SO I'm relatively new to html and javascript and I currently want to make a page that will fulfill certain operations such as finding the max number of an array of numbers and factorial of a number as shown below.

enter image description here

and here is how I am organizing these sections 

<!DOCTYPE html>
<html lang = "en">
    <head>
        <title>HTML/CSS Responsive Theme</title>
        <meta charset = "utf-8">
        <link rel = "stylesheet" href = "main.css" type = "text/css">
        <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
        <script>

        function startFactorial(number)
        {
            function factorial(num)
            {
                if(num <= 1)
                    return 1;

                return num * factorial(num - 1);
            }
            document.factorials.factorialsfield.value = factorial(number);
        }

        function startMaxofFive(str)
        {
            //can actually find the max of n numbers not limited to 5
            function maxoffive(string)      
            {
                var nums = (string.match(/[-]?\d+/g));
                var b = nums.map(Number);
                return Math.max.apply(Math,b);
            }
            document.mof.moffield.value = (maxoffive(str));
        }
        </script>
    </head>
    <body>
        <section id = "first">
            <h3>Factorial</h3>
            <form name= "factorials">
                Enter a number <input type = "number" name = "factorialsfield" value = 0>
                <br><br>
                <input type = "button"  onClick = "startFactorial(factorialsfield.value)" value = "Calculate"/>
            </form>
        </section>

        <br>

        <section id = "second">
            <h3>Max of Five Numbers</h3>
            <form name = "mof">
                Enter 5 numbers <input type = "text" name = "moffield" placeholder = " separate each number by commas" size = 26>
                <br><br>
                <input type = "button" onClick = startMaxofFive(moffield.value) value = "Calculate"/>
            </form>
        </section>

        <br>

        <section id = "third">
            <h3>Sum and Multiply</h3>
            <form name = "operations">
                Enter numbers to apply operations <input type = "text" name = "operationsfield"
            </form>
        </section>
    </body>
</html>

What I wanted to ask you all is is there a better way to access those functions in my script without having to create another function just to use them?

Upvotes: 1

Views: 112

Answers (4)

Englund0110
Englund0110

Reputation: 555

I am not sure that this is what you asked for, however, it seemed like you wanted to know about other methods to get access to your javascript code or script in your HTML.

I can truly recommend you, to look into Angular for this. With Angular you can call methods in your controller, and scope data between your view (HTML) and controller (Javascript).

https://angularjs.org/

But this is just one of many options!

Upvotes: 1

user4413591
user4413591

Reputation:

Here's some suggestions:

  1. You can use document.getElementById( id ) to get specific elements where id is the HTML's element id <element id="id_name">.

  2. Events allow you to trigger actions based on user input. It works basically the same, but you no longer need to name the functions: element_variable.event = function() { /* ... */ }

  3. See if the inner functions are really neccessary; see if you can edit the code where you no longer need that function (document.getElementById will probably be able to let you do that stuff)

Example:

<form id="factorials" name="factorials">
    <!-- Skipping input -->
    <input type="submit" <!-- ... -> />
</form>

// Javascript file
var fact = document.getElementById( "factorials" );
fact.onsubmit = function() {
    /* Your code here */
}

Upvotes: 1

noa-dev
noa-dev

Reputation: 3641

You always use functions to call functions. Sounds weird but thats how it is :P

You can remove the JS calls from your DOM by adding eventlisteners to your JavaScript file just like this example:

<script>
var x = document.getElementById('test');
x.addEventListener('click', function(){
// your function magic happens here
});
</script>
<div id="test"></div>

Sorry if I understood your question wrong

Upvotes: 1

Peter Jewicz
Peter Jewicz

Reputation: 666

It's generally considered best practice to move scripts to the bottom of the page before the closing body tag. This way the loading of the scripts won't interfere with page load.

You can also move your scripts to a separate file and include it:

<script src="myscripts.js"></script>

This will help keep your code more neat and organized.

Upvotes: 1

Related Questions