display alert message using JavaScript

Question

I have these four buttons and I need them to display an alert message depending on which button is clicked. I'm new at programming and am trying to get this function to work. But nothing happens when I click the buttons. I'm not sure whether I'm not applying the onclick event properly. I don't want to insert it in the html markup. Could anyone help me? What I'm I doing wrong here?

http://jsfiddle.net/q6QLy/1/

This is my html and Js code:

<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();
        }
    }

You haven't done anything to actually connect that `buttonClick` function to the `click` event for those HTML elements. — Matt Ball, Jan 11 '14 at 17:14
he did (last line, buttons.onclick = buttonClick();) but inside the function. Try to move this line outside from this function — ItayB, Jan 11 '14 at 17:17

score 2 · Accepted Answer · answered Jan 11 '14 at 17:47

2

here you have what you needed (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;
    }
}

answered Jan 11 '14 at 17:47

webdev-dan

1,339
7
10

Thanks @webdev-dan, I knew I was missing something that would target the specific element. I don't understand though the second line of the function when you use target and is there a specific reason in swtich case you used the full expression to get to the element and didn't create a variable and then pass the variable as the switch expression? – hyprstack Jan 11 '14 at 18:27
there is no difference which one you use (expression or variable). Usually when you use a variable to assign some objects returned by a longer expression - it's because you are going to need it more than once (so you will write less and improve execution speed because your expression will be evaluated only once when you assign it to a variable) ...and it makes code more readable - but in this case `input.getAttribute('id')` is clearly readable i think ;) – webdev-dan Jan 11 '14 at 19:02
in this line you asked about: `e` is an "event object" passed by system to handler function. `target` argument of an event object holds an element which fired this event - in this case it is one of the buttons. – webdev-dan Jan 11 '14 at 19:10
Got it. Appreciate the help. Yeah `input.getAttribute('id')` is clearly readable. With `e` could I replace it with any other character as long as I pass the same character as the argument in the function? – hyprstack Jan 11 '14 at 21:15
yes - character or more characters - same as name of a variable it is your choice how you name arguments of your function – webdev-dan Jan 11 '14 at 21:39

score 1 · Answer 2 · answered Jan 11 '14 at 20:01

I saw your problem and found a simple solution for you as you are new in programming.So Please read care fully you will understand everything.As below example,you want to get which button is clicked and according to that you want to alert different message.You can do this easily with jQuery.

See your desired result here 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");
         }
       });
   });

and also you want to get clicked input type is button then you can use same

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.
    }
}

score 0 · Answer 3 · edited May 23 '17 at 11:57

0

You have written a function buttonClick() but its not being called.

I would suggest try something like this,

input type="button" value="English" id="english" onclick="buttonClick()"

Ref:Link

Hope this might help!! Thanks

edited May 23 '17 at 11:57

Community

1
1

answered Jan 11 '14 at 17:21

M.K

218
3
10

That is what I want to avoid doing – hyprstack Jan 11 '14 at 18:31

score 0 · Answer 4 · answered Jan 11 '14 at 17:26

0

I think the simple thing is to add the onclick on every button. Like

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

Example

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

also you can call a common function passing the this and then do the check.

answered Jan 11 '14 at 17:26

A Paul

8,113
3
31
61

Thanks, I had thought of that but don't want to use event handlers that way. It's not best practise. – hyprstack Jan 11 '14 at 18:31

display alert message using JavaScript

4 Answers4