JavaScript를 사용하여 경고 메시지 표시

-2

나는이 4 개의 버튼이 있으며 클릭 한 버튼에 따라 경고 메시지를 표시해야합니다. 나는 프로그래밍에 익숙하지 않고이 함수를 작동 시키려고 노력하고있다. 그러나 버튼을 클릭해도 아무런 변화가 없습니다. onclick 이벤트를 제대로 적용하지 않을지 확실하지 않습니다. HTML 마크 업에 삽입하고 싶지 않습니다. 누구도 도와 줄 수 있습니까? 내가 여기서 뭘 잘못하고있는거야? 당신은 함수 buttonClick()하지만이라고하지를 작성했습니다JavaScript를 사용하여 경고 메시지 표시

<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' 함수를 HTML 요소에 대한'click' 이벤트에 추가합니다. –

그는 (마지막 줄, buttons.onclick = buttonClick();)하지만 함수 안에 있습니다. 이 함수를 외부에서이 라인으로 옮기십시오. – ItayB

당신은 내가 당신의 문제를보고 완전히 이해합니다 관리를 읽어 보시기 바랍니다 programming.So에 처음으로 당신을 위해 간단한 솔루션을 발견 (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' 인수는이 이벤트를 발생시키는 요소를 보유합니다.이 경우에는 버튼 중 하나입니다. –

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

이 내 HTML과 JS 코드입니다. 나는 이런 식으로 뭔가를 시도 제안

입력 유형 = "버튼"값 = "영어"ID = "영어"onclick을 = "buttonClick()"

참조 : Link

희망이 도움이 될 수 있습니다 !! 감사합니다.

출처

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

무슨 필요가 아래 예제처럼 어떤 버튼을 클릭했는지에 따라 다른 메시지를 경고하고 싶습니다.이 작업은 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를 사용하여 경고 메시지 표시

답변

관련 문제