使用滑塊值動態更新JavaScript中的條形圖

我正在嘗試創建一個動態響應滑塊輸入的條形圖。使用滑塊值動態更新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>

來源

2016-11-26 user2657817

幾個問題。根據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"; }

來源

2016-11-27 02:42:51

使用滑塊值動態更新JavaScript中的條形圖

回答

相關問題