带按钮的javascript中的条件

时间:2014-07-12 07:34:44

标签: javascript button if-statement conditional-statements click

我在javascript中有两个按钮,我需要一个条件来检查按下了哪个按钮。我在网上看到了一些例子,但它不起作用。有谁知道请帮助我并纠正我?

if(sx.clicked == true){
// dx.style.backgroundColor = colori[random];
alert("sx");
}

if(dx.clicked == true){
alert("dx");
}

5 个答案:

答案 0 :(得分:0)

你不是那样做的。您应该定义一个“click”事件 - 使用“onclick”html属性,或使用JS - element.onclick或addEventListener。

这些方式定义了当用户点击元素时,会执行一个函数。您定义了2个功能,每个按钮一个。你可以在这里阅读关于onclick属性和element.onclick的信息:http://www.w3schools.com/jsref/event_onclick.asp,关于addEventListener:https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

答案 1 :(得分:0)

您可以尝试以下代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<button onclick="buttonsHandler(this)">Button1</button>
<button onclick="buttonsHandler(this)">Button2</button>

<script type="text/javascript">
    function buttonsHandler(evt)
    {
        if(evt.textContent == "Button1")
        {alert("Button1 Clicked");}

        else if(evt.textContent == "Button2")
        {alert("Button2 Clicked");}
    }
</script>

</body>
</html>

答案 2 :(得分:0)

var elements = document.getElementsByTagName('a');
   for(var i = 0, len = elements.length; i < len; i++) {
      elements[i].onclick = function () {
        alert(this.id);
   }
}

这是一个小提琴http://jsfiddle.net/9PvU5/

答案 3 :(得分:0)

将事件添加到按钮而不是特定按钮不是一个好习惯。但有时如果你有两个/三个组合按钮,你可以试试。

<button onclick="buttonsClick(this)" data-attr="btn1">Button1</button>
<button onclick="buttonsClick(this)" data-attr="btn2">Button2</button>

<script type="text/javascript">
function buttonsClick(btn)
{
    if(btn.getAttribute('data-attr') === "btn1")
    {console.log("Button1 Clicked");}
    else if(btn.getAttribute('data-attr') === "btn2")
    {console.log("Button2 Clicked");}
}
</script>

答案 4 :(得分:0)

这可能是您尝试使用的最接近的方法,但是在正确的Javascript中:

<html>
  <head>
    <script>
      var button1 = document.getElementsByTagName("button")[0];
      var button2 = document.getElementsByTagName("button")[1];

      button1.onclick = function() { /*execute some code here*/ };
      button2.onclick = function() { /*execute some code here*/ };
    </script>
  </head>
  <body>
    <button>Button 1</button>
    <button>Button 2</button>
  </body>
</html>