Question

我是JS的新手，对这个问题有点困惑，我希望你能理解这个问题：

当我想在一个函数中使用来自另一个函数的变量时，或来自onClick等事件。将它从HTML或其他函数移动到执行函数

的正确方法是什么？

工作（还没有......）示例：我有一个包含一些多项选择题的页面，每个问题都是一个新表单，我希望所有提交按钮都有一个功能，并且在提交时检测到表格的名称，我应该使用onsubmit="validate(this)吗？或者有更好的方法来获取表单的名称并将其放入validate函数，

并且一般来说，当我使用function something(){}并且我希望它从外部获取变量时，我必须制作function something(a,b,c){}还是取决于变量的范围？嗯..我甚至不确定我是否理解得足以提出一个好问题，所以任何关于这个主题的文章或教程的参考都会有很多帮助。

Answer 1

我会推荐不突兀的javascript。

document.form[0].addEventListener("submit", function(event) {
    switch (event.target.name) {
        // switch form name.
    }
});

当你设计一般函数时，你应该想到你想接受的参数。

例如

function addNumbers(one, two) {
    // add them
}

旨在取两个数字。您应该使用正确的参数设计来使用您的函数。

<div id="bar"> 3 </div>

...

(function() {
    // local variables
    var one = 1;
    var two = 2;

    // Your getting number 3 globally from the HTML.
    var three = document.getElementById("bar").textContent;

    // passed in as parameters
    console.log(addNumbers(one, two)); // 3
    console.log(addNumbers(two, three)); // 5

})();
console.log(one) // undefined.

Answer 2

因此JavaScript中有一些应该能够提供帮助的核心功能概念。 First和formost：对于处理DOM事件，您可能希望依赖于库，除非您确实有0个浏览器兼容性期望。我建议调查jQUery。

也就是说，不引人注目的JavaScript（根据@Raynos回答）是在JavaScript中绑定事件的正确方法，并为您提供了很大的灵活性。请看以下示例：

function setup_events(){
  var my_form = document.form[0],
      form_name = my_form.name;
  my_form.addEventListener("submit", function(event) {
    console.log( form_name ); // this is retained through the closure.
  });
}

您可以看到，在外部作用域从内部作用域返回后，可以使用闭包的概念或外部作用域的上下文将数据绑定到事件函数中。现在，当您执行setup_events时，您将使用内部有权访问外部变量form_name的函数绑定submit事件。如果你不理解函数范围，这会产生一些令人讨厌的副作用，所以请注意这样的代码：

// XXX : BAD CODE
function setup_events(){
  var ul = document.getElementsByTagName('ul')[0], // assumes there is a <ul>
      count = 0;
  for ( var li in ul.childNodes ) {
    li.addEventListener('click', function( event ){
      alert( count ++ ); // this will always alert the count of list, not the list position
    }
  }
}

您可以使用Immediately Invoked Function Expressions创建必要的闭包以保持正确的状态。所以要“修复”上面的代码，你会使用类似的东西：

// XXX : BETTER CODE
/**
 * NOTE: NEVER CREATE FUNCTIONS INSIDE A LOOP
 * this example only shows the immediate solution to the above problem
 * with regard to function scope and closures.
 */
function setup_events(){
  var ul = document.getElementsByTagName('ul')[0], // assumes there is a <ul>
      count = 0;
  for ( var li in ul.childNodes ) {
    li.addEventListener('click', (function( count ){
      return function ( event ){
        alert( count ); // this will alert the position in the list
      };
    })(count ++))
  }
}

Answer 3

好吧，如果你有这样的功能：

function something(){
...
}

你仍然可以这样做：

something(1,2,3);

结果将在函数中的关联对象中，因此您可以像这样访问它们：

function something(){
    //check for args:
    if(arguments === undefined){...}
    arguments[0]; //which is 1 in our case
    //etc
}

但是在引用on{something}时，您通常必须传递this，或者使用某种事件处理程序

Answer 4

你可以做这样的事情，但不完全是这样，但你明白了：

function onSubmitClick(){
    if(document.getElementById('choice1').checked==true){
        //store result
    }else if((document.getElementById('choice2').checked==true){
        //store result
    }else if(document.getElementById('choice3').checked==true){
        //store result
    }else if(document.getElementById('choice4').checked==true){
        //store result
    }else{
        //they didn't choose any

JavaScript函数接受变量的正确方法是什么

4 个答案: