使用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'函數添加到這些HTML元素的'click'事件。 –

他做了（最後一行，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（）」

編號：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

我看到了你的問題，並發現了一個簡單的解決方案，你，你在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顯示提醒消息

回答

相關問題