javascript - 如何将一些丑陋的内联 JavaScript 转换为函数？

Question

我有一个表单，其中包含各种默认情况下没有值的输入。当用户更改一个或多个输入时，包括空白值在内的所有值都将在提交时用于 URL GET 字符串。

所以为了清理它，我有一些 JavaScript 可以在提交之前删除输入。它工作得很好，但我想知道如何将其放入 js 函数中或对其进行整理。将所有内容集中到一个 onclick 中似乎有点困惑。另外，我将添加更多内容，所以会有很多。

这是相关代码。有 3 个独立的线路用于 3 个独立的输入。该行的第一部分有一个引用输入 ID(“mf”，“cf”，“bf”，“pf”)的值，该行的第二部分引用父 div(“dmf”，“dcf”等)。

第一部分是输入结构的例子:

echo "<div id='dmf'><select id='mf' name='mFilter'>";

这部分是提交和js:

echo "<input type='submit' value='Apply' onclick='javascript: if (document.getElementById(\"mf\").value==\"\") { document.getElementById(\"dmf\").innerHTML=\"\"; }
if (document.getElementById(\"cf\").value==\"\") { document.getElementById(\"dcf\").innerHTML=\"\"; }
if (document.getElementById(\"bf\").value==\"\") { document.getElementById(\"dbf\").innerHTML=\"\"; }
if (document.getElementById(\"pf\").value==\"\") { document.getElementById(\"dpf\").innerHTML=\"\"; }
' />";

我的 JavaScript 知识几乎为零，因此非常感谢帮助将其转换为更简洁的函数或类似函数。

Answer 1

您的 HEAD 中的脚本 block :

<script type="text/javascript">
    function yourFunctionName(){
       ...your javascript goes here...
    }
</script>

然后是你的点击:

onclick="javascript:yourFunctionName()"