Question

你好，所以我对html和javascript相对较新，我现在想制作一个能够完成某些操作的页面，例如查找数字数组的最大数量和数字的阶乘，如下所示。

enter image description here

以下是我如何组织这些部分

<!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>

我想问你们的是，有没有更好的方法来访问我的脚本中的这些函数而不必创建另一个函数来使用它们？

Answer 1

通常认为在关闭正文标记之前将脚本移动到页面底部是最佳做法。这样，加载脚本不会干扰页面加载。

您还可以将脚本移动到单独的文件中并将其包含在内：

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

这有助于保持代码更整洁有序。

Answer 2

您始终使用函数来调用函数。听起来很奇怪，但就是这样：P

您可以通过向JavaScript文件中添加eventlisteners来删除DOM中的JS调用，如下例所示：

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

对不起，如果我理解你的问题错了

Answer 3

我不确定这是你要求的，但是，您似乎想知道其他方法可以访问您的HTML中的javascript代码或脚本。

我可以真正推荐你，为此调查Angular。使用Angular，您可以调用控制器中的方法，并在视图（HTML）和控制器（Javascript）之间调整范围数据。

https://angularjs.org/

但这只是众多选择之一！

Answer 4

以下是一些建议：

您可以使用document.getElementById( id )获取 id 是HTML的元素ID <element id="id_name">的特定元素。
事件允许您根据用户输入触发操作。它的工作原理基本相同，但您不再需要命名函数：element_variable.event = function() { /* ... */ }
看看内部功能是否真的是必要的;看看你是否可以编辑不再需要该功能的代码（document.getElementById可能会让你做那些事情）

示例：

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

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

应用javascript脚本的更好方法

4 个答案: