我正在尝试创建一个动态响应滑块输入的条形图。
（1）我想访问外部脚本中的滑块值。目前，我试图通过定义一个使用document.getElementById（）。value的函数来做到这一点。当我运行alert以检查是否存储了该值时，我得到了未定义的信息。这里发生了什么？
（1b）在将代码粘贴到plunker中时，它表示＆＃34;意外的开始标记，＆＃34;它被忽略了。为什么会这样？
（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>
答案 0 :(得分：1)
有几个问题。根据{{3}}，value属性设置或返回选项的值（提交表单时要发送到服务器的值）。您的ID被分配给输入的父div。
假设你知道我按照这个快速w3schools的方式做了一些事情。
作为一般编码提示，不要通过尝试一次性完成所有操作来使代码复杂化，而是将您的任务分解为更小，更易于管理的块。这样，您可以更轻松地对代码进行排序和调试。它也可能有助于你的随机错误。
根据他们的价值排序你的酒吧，id点击了这篇文章codepen虽然我说如果可能的话，使用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";
}