使用Javascript - progress元素的JavaScript的單擊事件

我有一個進度標籤的形式標記和三個設定值屬性提交如下：使用Javascript - progress元素的JavaScript的單擊事件

<form> 
    <progress min="0" max="100" value="0"></progress> 
    <input type="submit" value="submit1"> 
    <input type="submit" value="submit2"> 
    <input type="submit" value="submit3"> 
</form>

我有一點點的js代碼監聽點擊事件，並改變進度條的價值。

;(function(){ 
    document.body.addEventListener('click', function(){ 
     var p = document.querySelector('progress'); 
     var s = document.querySelector('input'); 
     var val; 
     if(s.value=="submit1"){ 
      val=33; 
     } 
     if(s.value=="submit2"){ 
      val=66; 
     } 
     if(s.value=="submit3"){ 
      val=100; 
     } 
     p.value=val; 
    }, false); 
}());

但是進度條並未按預期工作。

我可以解決這個問題的任何一點？

來源

2014-01-13 acdarekar

關於document.querySelector：

返回文檔內（使用文檔的節點的深度優先前序遍歷），該選擇器的指定的組相匹配的第一個元素。

所以，代碼總是會返回「submit1」，因爲它是文檔中的第一個元素。表單的提交使回調頁面，你看不到更改，因爲代碼將返回到初始階段。如果您不想執行回調，只需將輸入類型更改爲「按鈕」即可。另外，我爲您提供附加onclick事件到每個按鈕和調用您想要的功能。

編輯：工作代碼波紋管。

<form> 
     <progress min="0" max="100" value="0" id="progressBar1"></progress> 
     <input type="button" value="submit1" onclick="SubmitProgress(33);" /> 
     <input type="button" value="submit2" onclick="SubmitProgress(66);" /> 
     <input type="button" value="submit3" onclick="SubmitProgress(100);" /> 
    </form> 
    <script type='text/javascript'> 
     function SubmitProgress(valueToSet) { 
      document.getElementById("progressBar1").value = valueToSet; 
     } 
    </script>

來源

2014-01-13 10:26:27

謝謝，它的工作如預期。我正在嘗試使用所有三個按鈕的常見單擊事件來實現它。 – acdarekar

不客氣！ :) 如果你想使用通用函數，沒有參數，你可以添加一個自定義屬性（例如「progressValue」），你的JS函數將是： 'function SubmitProgress（）{ var valueToSet = $（this）.attr （「progressValue」）; if（valueToSet == undefined）{valueToSet = 0; } else {valueToSet == parseInt（valueToSet）; } document.getElementById（「progressBar1」）。value = valueToSet; } ' –

在你的javascript - 一個錯字可能是什麼殺死了劇本。除了使用

;(function(){

使用此的：

$(function(){

來源

2014-01-13 10:26:39 Faron

使用Javascript - progress元素的JavaScript的單擊事件

回答

相關問題