javascript将变量从子级传递给父级

Question

我大大缩短了代码，但下面非常有效地传达了这一点，我试图在按下按钮时更新变量“Monitor”。如果我将所有代码放在“button.onclick”函数中，我就可以将变量传递到我的代码中。但是，在按下按钮之前我的代码不会运行。我需要运行我的代码，如果按下按钮，它就会更新我的代码。

<form name="form1">
  <span id="buttons">
    <input type="button" name="button1" value="funny1"/>
    <input type="button" name="button2" value="funny2"/>
  </span>
</form>
<script type="text/javascript">
    var Monitor, buttonsDiv=document.getElementById("buttons");
    Monitor = "funny1"
    for (var i=1; i<=2; i++) {
        var button = document.form1["button" + i];
        button.onclick = function() {
            buttons.Monitor = this.value;
        };

        /*lots of my own code that runs
        inside of my for loop waiting
        to reference monitor for an update*/

</script>

Answer 1

希望下面的代码能让您朝着正确的方向前进。我认为您没有连接每个按钮的所有事件，而是试图获取它，以便每个按钮然后调用一个函数来设置 Monitor 的值。

var Monitor = "funny1";

//selecting all elements named button  
var buttons = document.querySelectorAll('input[type="button"]');

//For each of the buttons wire up an event listener
for(var i=0, length=buttons.length; i < length;i++)
{
    //create a reference shorthand
    var button = buttons[i];

    //add the event listener for a click
    button.addEventListener('click', function(event)
    {
        //on the event look at the event's target property to find the element that invoked the click
        Monitor = event.target.value;
        console.log(Monitor);  //Output the value of monitor the the console
    });    
}

此代码首先查找所有 type=button 的输入。我建议你也许给输入一个类，而不是让选择器更清晰，你的选择。其次，我循环遍历按钮并为每个按钮连接一个事件。然后该事件设置 Monitor 变量的值。

http://jsfiddle.net/wcf4c/