我正在尝试创建一个动态响应 slider 输入的条形图。
(1) 我想访问外部脚本中的 slider 值。目前，我尝试通过定义一个使用 document.getElementById().value 的函数来实现此目的。当我运行警报来检查是否存储了该值时，我得到了未定义的信息。这是怎么回事？
(1b) 在将代码复制粘贴到 plunker 中时，它显示“意外的开始标记”，并且它被忽略。为什么会发生这种情况？
(2) 给定当前代码，我想获取 slider 值，将其乘以已知常量，然后按这些输出对条形图进行排序。进行此类事情的最佳方法是什么？
此处附有代码: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>
最佳答案
几个问题。根据w3schools , value 属性设置或返回选项的值(提交表单时发送到服务器的值)。您的 ID 已分配给输入的父 div。
假设您知道项目的数量，我会按照此快速 codepen 做一些事情我做了。
作为一般的编码技巧，我不会通过尝试一次完成所有事情来使代码复杂化，而是将您的任务分解为更小、更易于管理的 block 。这样，排序和调试代码就容易得多。它也可能有助于解决您的随机错误。
关于根据其值对条形进行排序，我点击了这篇文章 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";
}
关于javascript - 使用 slider 值动态更新 Javascript 中的条形图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40815546/