在按钮点击链中执行 javascript 函数答案

【问题标题】：Execute javascript function in chain of button clicks在按钮点击链中执行 javascript 函数
【发布时间】：2013-02-21 20:23:59
【问题描述】：

在我原来的帖子中，我不确定我应该去的深度。这是自从发布 jQuery 答案以来我一直在做的事情：

我正在尝试执行一项任务，该任务要求用户从一系列按钮中选择并单击一个 html 按钮，然后需要从一系列按钮中选择另一个 html 按钮。

基本上我希望将第一个按钮选择的值作为参数传递给一个函数，该函数将在用户单击第二个按钮时运行。我只是在学习 javascript，我迷路了。

谢谢

HTML：

<form id="scoreboard">
<div>
<input type="text" name="homeTeam" value="00" size="2"  "readonly" id="homeTeamScore"/>
<input type="button" value="+1" name="add1" id="homeAdd1" class="homeScore" onClick="calcScore(1)"/>
<input type="button" value="-1" name="neg1" id="homeNeg1" class="homeScore" onClick="calcScore(4)"/>
</div>
<div>
<input type="button" name="homeP1" id="homeP1" class="player" value="24" style="text-align:center;"/>
<input type="text" name="homeP1Score" value="0" size="2" style="text-align:center;"/>
</div>
<div>
<input type="button" name="homeP2" id="homeP2" class="player" value="44" style="text-align:center;"/>
<input type="text" name="homeP2Score" value="0" size="2" style="text-align:center;"/>
</div>
</form>

Javascript：

function calcScore(amount) {
if(amount==1) {scoreboard.homeP1Score.value++;scoreboard.homeTeam.value++;}
else if(amount==4) {scoreboard.homeP1Score.value--;scoreboard.homeTeam.value--;}
}

$('.player').click(function() {
//initialize the second button listener
var data = $(this).attr('data');
$('.homeScore').click(function() {
    function addHomeScore(data)
});
});

【问题讨论】：

是否可以从被点击的特定按钮定义函数参数？

标签： javascript html button

【解决方案1】：

使用 jQuery：

$('#buttonId').click(function() {
    //initialize the second button listener
    var data = $(this).attr('data');
    $('#button2Id').click(function() {
        yourFunction(data);
    });
 });

此方法更好，因为它使用 JavaScript 作用域来避免全局变量。由于 JavaScript（尤其是 jQuery）有时会同时执行多个线程/函数，因此很容易遇到全局问题。它们也很难测试且不安全。

【讨论】：

【解决方案2】：

在原始 JavaScript 中：

HTML：

 <button class="button1" onclick="saveValue()" />
 <button class="button2" onclick="callMethod()" />

JavaScript：

 myGlobalVariable = null;
 function saveValue(){
       myGlobalVariable = "Value That Was Selected";
 }

 function callMethod(){
       alert(myGlobalVariable + "I HAZ ACCESS TO GLOBALS!!!!");
 }

在 jQuery 中：

HTML：

     <button class="button1" />
     <button class="button2" />

JavaScript：

     myGlobalVariable = null;
     $('button.button1').click(function(){
             myGlobalVariable = "Value That Was Selected";
     });
     $('button.button2').click(function(){
            alert(myGlobalVariable + "I HAZ ACCESS TO GLOBALS!!!!");
     });

【讨论】：

【解决方案3】：

在js中设置一些全局变量。然后在每个按钮上设置一些 onClick 事件来更改全局变量。然后单击下一步按钮可以查看全局变量中的值

<button onclick="myFunction()">Click me</button>

【讨论】：