使用Sliders值动态更新Javascript中的条形图
我正在尝试创建一个动态响应来自滑块的输入的条形图。
(1)我想访问外部脚本中的滑块值。目前，我已经尝试通过定义一个使用document.getElementById().value的函数来做到这一点。当我运行alert来检查这个值是否被存储时，我得到了undefined。这里发生了什么事？
(1b)在将代码复制粘贴到plunker中时，它显示为“意外的开始标记”，并被忽略。为什么会发生这种情况？
(2)给定当前代码，我想获取滑块值，将其乘以一个已知常量，然后根据这些输出对条形图进行排序。做这类事情最好的方法是什么？
代码附加在这里：https://plnkr.co/edit/C0iV74mBkFbFM0BVG7Ax?p=streamer
<script>
...
var test;
function kk()
{
test = document.getElementById('cardiovascular').value;
alert(test)
}
...
</script>
<h4> Cardiovascular Mortality </h4>
<div id="cardiovascular"></div>
<body onload="onload();">
<input type="button" value="click" onclick="kk();"/>
</body>回答 1
Stack Overflow用户
发布于 2016-11-27 10:42:51
有几个问题。根据w3schools的说法，value属性设置或返回选项的值(提交表单时发送到服务器的值)。您的id被分配给输入的父div。
假设您知道项目的数量，我会按照我做的这个快速codepen的思路来做一些事情。
作为一个通用的编码技巧，我会将你的任务分解成更小的、更容易管理的块，而不是试图一次完成所有的事情，从而使你的代码变得复杂。这样可以更容易地对代码进行排序和调试。它也可能对你的随机错误有所帮助。
在根据条形图的值排序方面，我点击了这个帖子here，尽管我会说，如果可能的话，使用jQuery会容易得多。您可以查看此here的示例。
祝你好运，如果答案回答了你的问题，请别忘了给它加一张票。
<p>value for chart 1</p>
<input id="value_for_chart1" type="text" value="3"/>
<p>value for chart 2</p>
<input id="value_for_chart2" type="text" value="3"/>
<input id="trigger_button" type="button" value="click" onclick="kk()"/>
<div class="bar-container">
<div id="bar-two" value=""></div>
<div id="bar-one" value=""></div>
</div>
#bar-one {
width: 0px;
height: 50px;
background-color: red;
}
#bar-two {
width: 0px;
height: 50px;
background-color: green;
}
function kk() {
var chart1value;
var chart2value;
var fixedValue = 100; //or whatever your fixed value is
var barWidth1 = document.querySelector("#bar-one");
var barWidth2 = document.querySelector("#bar-two");
//Return value of input. We use parseInt here to convert the string"value" to the integer value
chart1value = parseInt(document.getElementById('value_for_chart1').value);
chart2value = parseInt(document.getElementById('value_for_chart2').value);
chart1value = chart1value * fixedValue;
chart2value = chart2value * fixedValue;
//assign value to bar chart item, you can grab this value later for sorting
document.getElementById('bar-one').value=chart1value;
document.getElementById('bar-two').value=chart2value;
//set the css width property of the bar to its value
barWidth1.style.width = chart1value + "px";
barWidth2.style.width = chart2value + "px";
} https://stackoverflow.com/questions/40815546
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号