Question

我正在尝试创建一种非常简单的方法来更改提交的值，该变量使用简单的饼图库来决定饼图的百分比。

以下是易于使用的代码。

browserify

通过将数据百分比设置为0

，上面的饼图为0％

<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>

以上构建饼图 - 但是我需要一个简单的输入字段并提交以更改变量<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>的值我尝试使用返回值但不允许这样做，我尝试使用jquery来写出价值但仍不确定，但我确信这是一件简单的事情？

Answer 1

您可以在按下按钮时阅读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的函数中。

使用简易饼图库的可变数字

1 个答案: