Question

我有这四个按钮，我需要它们根据点击的按钮显示警告信息。我是编程的新手，我正试图让这个功能起作用。但是当我点击按钮时没有任何反应。我不确定我是不是正确应用了onclick事件。我不想在html标记中插入它。谁能帮助我？我在这里做错了什么？

这是我的html和Js代码：

<body>
        <ul style="list-style-type:none" id="buttons">
            <li><input type="button" value="English" id="english"/></li>
            <li><input type="button" value="Spanish" id="spanish"/></li>
            <li><input type="button" value="Hebrew" id="hebrew"/></li>
            <li><input type="button" value="French" id="frech"/></li>
        </ul>
        <script language="javascript" type="text/javascript" src="lab6functions.js">

        </script>
    </body>

function buttonClick () {
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById) return false;
    //store buttons in variable buttonsList
    var buttonsList = document.getElementsByTagName("input");
            //iterate through all elements of buttonList
            for (var i = 0; i<buttonsList.length; i++) {
            //store each element to the variable buttons and get each individual id for each button
                var buttons = buttonsList[i].getElementById("id");
                //when a button is clicked, display the alert box with the message corresponding to each language
                switch(buttons) {
                case "english":
                alert("Hello! How are you?");
                break;
                case "spanish":
                alert("Hola! Como estas?");
                break;
                case "hebrew":
                alert("Shalom!");
                break;
                case "french":
                alert("Bonjour!");
                break;
                default:
                alert("Please select a language");
            }
            buttons.onclick = buttonClick();
        }
    }

Answer 1

这里有你需要的东西（http://jsfiddle.net/2v2C2/2/）

// when one of buttons clicked this func will execute
function buttonClick (e) {

    var input = e.target;

    // alert different message for different buttons
        switch(input.getAttribute('id')) {
            case "english":
            alert("Hello! How are you?");
            break;
            case "spanish":
            alert("Hola! Como estas?");
            break;
            case "hebrew":
            alert("Shalom!");
            break;
            case "frech":
            alert("Bonjour!");
            break;
            default:
            alert("Unexpected button pressed ...i don't know what to say");
        }
}


//store buttons in variable buttonsList
var buttonsList = document.getElementsByTagName("input");

//iterate through all elements of buttonList and attach event handler if they are buttons (not all input elements are buttons)
for (var i = 0; i<buttonsList.length; i++) {
    var input=buttonsList[i];
    if (input.getAttribute('type')=='button') {
        input.onclick = buttonClick;
    }
}

Answer 2

我看到了你的问题并为你找到了一个简单的解决方案，因为你是编程新手。所以请完全阅读，你会理解一切。如下例所示，你想要点击哪个按钮，并根据你想要的警告不同的消息。您可以使用jQuery轻松完成此任务。

在http://jsfiddle.net/q6QLy/26/

中查看您想要的结果

<body>
    <ul style="list-style-type:none" id="buttons">
        <li>
            <input type="button" value="English" id="english" />
        </li>
        <li>
            <input type="button" value="Spanish" id="spanish" />
        </li>
        <li>
            <input type="button" value="Hebrew" id="hebrew" />
        </li>
        <li>
            <input type="button" value="French" id="frech" />
        </li>
    </ul>
    </body>

    $(document).ready(function() {
       $('input:button').click(function() {
          var buttons = $(this).val();
          alert("You have clicked on button "+buttons);
          switch(buttons){
             case "English":
                 alert("Hello ,how are you ?");
             break;
             case "Spanish":
                 alert("Hola! Como estas?");
                 break;
             case "Hebrew":
                 alert("Shalom!");
                 break;
             case "French":
                 alert("Bonjour!");
                break;
             default:
                 alert("Please select a language");
         }
       });
   });

并且你想要点击输入类型是按钮然后你可以使用相同的

var buttonsList = document.getElementsByTagName("input");
  for (var i = 0; i<buttonsList.length; i++) {
    var input=buttonsList[i];
    if (input.getAttribute('type')=='button') {
        //write your function whatever you want.
    }
}

Answer 3

你编写了一个函数buttonClick（）但是没有调用它。

我建议尝试这样的事情，

input type =“button”value =“English”id =“english”onclick =“buttonClick（）”

价：Link

希望这可能会有所帮助!! 感谢

Answer 4

我认为简单的事情是在每个按钮上添加onclick。喜欢

http://jsfiddle.net/q6QLy/3/

实施例

<input type="button" value="English" id="english" onclick="alert('Hello! How are you?');"/>

你也可以调用一个通用函数来传递它，然后进行检查。

使用JavaScript显示警报消息

4 个答案: