使用簡單的餅圖庫的變量號

我想創建一個非常簡單的方法來更改提交變量上的值，該變量指示使用簡單的餅圖庫的餅圖的百分比。使用簡單的餅圖庫的變量號

這是它很容易使用的代碼。

<span class="chart" data-percent="0"> 
<span class="percent"></span> 
</span> 
<input id="value1" type="text" /> 
<span> + </span> 
<input id="value2" type="text" /> 
<span class="btn js_update" onclick="output();">Update chart</span> 
<p id="result"> </p>

上面開始餅圖在0％由數據百分比設置爲0

<script src="../dist/easypiechart.js"></script> 
<script> 
    function output(){ 
    var value1 = document.getElementById('value1').value; 
    var value2 = document.getElementById('value2').value; 
    document.getElementById('result').innerHTML = parseInt(value1) + parseInt(value2); 
} 


document.addEventListener('DOMContentLoaded', function() { 
    var chart = window.chart = new EasyPieChart(document.querySelector('span'), { 
     easing: 'easeOutElastic', 
     delay: 3000, 
     barColor: 'purple', 
     trackColor: 'pink', 
     scaleColor: false, 
     lineWidth: 20, 
     trackWidth: 20, 
     lineCap: 'butt', 
     onStep: function(from, to, percent) { 
      this.el.children[0].innerHTML = Math.round(percent); 
     } 
    }); 




    document.querySelector('.js_update').addEventListener('click', function(e) { 
     chart.update(Math.floor(val2)); 
    }); 

}); 
</script>

上述構建餅圖 - 但是我需要一個簡單的輸入字段，並提交改變變量的值val1我試圖使用返回值，但不會允許，我試圖使用jquery寫出值，但仍然不確定，但我相信這是一件簡單的事情？

來源

2015-11-28 PhpDude

你可以添加表單的html代碼，包括提交按鈕嗎？ – trincot

嘿我已經更新了你的例子 - 我一直在嘗試自己修復它 - 所以提交按鈕爲我輸出數據，但我想要它進入'val1'變量 – PhpDude

您可以在按鈕按下的瞬間讀取您的input值：

document.querySelector('.js_update').addEventListener('click', function(e) { 
    var val1 = parseInt(document.querySelector('#value1').value); 
    var val2 = parseInt(document.querySelector('#value2').value); 
    chart.update(Math.floor(val2)); 
});

在上面的代碼只val2使用，但是你會明白一個道理：

用戶點擊按鈕
調用兩個事件處理程序：output和上面的匿名函數，鏈接addEventListener
後者讀取第一個input中的文本，並將其轉換爲數字。
這同樣適用於第二input
做到，那麼在圖表更新

你有類似的代碼爲output，但請注意，執行的順序沒有定義。在上述步驟之前或之後可能會執行output。

對兩個任務只使用一個事件處理程序會更有意義：執行添加和更新圖表。因此，要麼將所有代碼放在output（圖表業務）中，要麼放下output，並將添加的東西放在您傳遞給addEventListener的函數中。

來源

2015-11-29 00:27:48 trincot

使用簡單的餅圖庫的變量號

回答

相關問題