показать сообщение с помощью JavaScript

-2

У меня есть эти четыре кнопки, и мне нужно, чтобы они отображали предупреждающее сообщение в зависимости от того, какая кнопка нажата. Я новичок в программировании и пытаюсь заставить эту функцию работать. Но ничего не происходит, когда я нажимаю кнопки. Я не уверен, правильно ли я применяю событие onclick. Я не хочу вставлять его в разметку html. Может ли кто-нибудь мне помочь? Что я делаю здесь неправильно?показать сообщение с помощью JavaScript

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

Это мой 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(); 
     } 
    }

источник

2014-01-11 hyprstack

Вы ничего на самом деле соединить, что 'не сделано buttonClick' для события 'click' для этих элементов HTML. –

он сделал (последняя строка, buttons.onclick = buttonClick();) но внутри функции. Попробуйте переместить эту строку за пределы этой функции – ItayB

здесь у вас есть то, что вам нужно (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; 
    } 
}

источник

2014-01-11 17:47:05

Спасибо @ webdev-dan, я знал, что мне не хватает чего-то, что предназначалось бы для конкретного элемента. Я не понимаю, хотя вторая строка функции, когда вы используете цель, и есть ли какая-то конкретная причина в swtich случае, вы использовали полное выражение для доступа к элементу и не создали переменную, а затем передали переменную в качестве переключателя выражение? – hyprstack

нет никакой разницы, какой вы используете (выражение или переменная). Обычно, когда вы используете переменную для назначения некоторых объектов, возвращаемых более длинным выражением, это потому, что вам понадобится ее более одного раза (так что вы будете писать меньше и увеличивать скорость выполнения, потому что ваше выражение будет оцениваться только один раз, когда вы назначаете его переменная) ... и делает код более читаемым, но в этом случае 'input.getAttribute ('id')' явно читаем, я думаю;) –

в этой строке, о которой вы спрашивали: 'e' - это объект события «передается системой на функцию обработчика. Аргумент 'target' объекта события содержит элемент, который активировал это событие - в этом случае это одна из кнопок. –

Вы написали функцию ButtonClick(), но его не называют.

Я хотел бы предложить попробовать что-то вроде этого,

тип ввода = "Кнопка" значение = "Английский" ID = "английский" OnClick = "ButtonClick()"

Ref: Link

Надеюсь, это поможет! Thanks

источник

2014-01-11 17:21:04

Это то, чего я хочу избежать – hyprstack

Я думаю, что простая вещь - добавить onclick на каждую кнопку. Как

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

Пример

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

также можно вызвать общую функцию, проходящей через это, а затем выполнить проверку.

источник

2014-01-11 17:26:00

Спасибо, я подумал об этом, но не хочу использовать обработчики событий таким образом. Это не лучшая практика. – hyprstack

Я видел вашу проблему и нашел простое решение для вас, как вы новичок в programming.So Пожалуйста, прочитайте уход полностью вы поймете, все. Как показано ниже, вы хотите получить, какую кнопку нажать, и в соответствии с тем, что вы хотите оповестить о другом сообщении. Вы можете сделать это легко с помощью 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. 
    } 
}

источник

2014-01-11 20:01:34

показать сообщение с помощью JavaScript

ответ

Смежные вопросы