2017-03-13 10 views
0

矢印移動に基づいて異なる値を表示するJavaScriptコードがあります。私は正確に説明することはできませんので、画像を参照してください。 http://imgur.com/WjG60t1JavaScriptを計算して表示することができません

私は帯域幅の数を除いてすべてを変更することができました。矢印の帯域幅を移動するに#bandwithが<スパン>要素であるので、あなたが.VALUE、.innerHtmlとの内容を変更することができない、すなわち2TB

<div class="sliderCon"> 
<div class="slider-wrap slider-container"> 
<input readonly="" class="value" onchange="s.setValue(parseInt(this.value))" name="hvalue" id="hvalue" value="0" type="hidden"> 
<div tabindex="1" id="slider1" class="horizontal dynamic-slider-control"> 
<input id="sliderinput1" class="slider-input" value="0"> 
</div> 
<script type="text/javascript"> 
var packages = [ 
[ 50, 1, 25600, 2097152, 15.00, '#/cart.php?a=add&pid=59', ''], 
[ 100, 2, 51200, 4194304, 30.00, '#/cart.php?a=add&pid=21', ''], 
[ 100, 4, 102400, 8388608, 50.00, '#/cart.php?a=add&pid=22', ''] 
]; 
function _(id){return document.getElementById(id);} 
var s = new Slider(_("slider1"), _("sliderinput1")); 
var old_value = 0; 
s.onchange = function() { 
new_value = s.getValue(); 
_('line').style.backgroundRepeat = 'no-repeat'; 
_('line').style.backgroundPosition = (parseInt(_('handle').style.left) - 0) + 'px 0px'; 
//_('p' + old_value).setAttribute("class", ""); 
for(var i=2; i>=0;i--) 
{ 
if(i > new_value) 
_('p' + i).setAttribute("class", ""); 
else 
_('p' + i).setAttribute("class", "active"); 
} 
old_value = new_value; 
_('hvalue').value = new_value; 
_('cpu').innerHTML = packages[new_value][0] + ' %'; 
_('ram').innerHTML = packages[new_value][1] + ' GB'; 
_('disk').innerHTML = parseInt(packages[new_value][2]/1024) + ' GB'; 
_('bandwidth').value = new_value; 
_('price1').innerHTML = '$' + (packages[new_value][4]).toFixed(2); 
_('odernow').href = packages[new_value][5]; 
_('compare').href = packages[new_value][6]; 
}; 
window.onresize = function() { 
s.recalculate(); 
}; 
</script> 
<div class="clr"></div> 
<ul class="sliderStyle"> 
<li class="NoBorderLt server01"><a id="p0" onclick="s.setValue(0)" href="javascript:%20return;">Starter VPS</a></li> 
<li class="server02"><a id="p1" onclick="s.setValue(1)" href="javascript:%20return;">Developer VPS</a></li> 
<li class="server03"><a id="p2" onclick="s.setValue(2)" href="javascript:%20return;">Executive VPS</a></li> 

</ul> 
<div class="clr"></div> 
<div class="sliderStyle02Con"> 
<ul class="sliderStyle02"> 
<li class="cpu"><strong>CPU Usage</strong><br> 
<span class="sliderTextStyle" id="cpu">50%</span></li> 
<li class="ram"><strong>RAM</strong><br> 
<span class="sliderTextStyle" id="ram">1 GB</span></li> 
<li class="space"><strong>Disk Space</strong><br> 
<span class="sliderTextStyle" id="disk">25 GB</span></li> 
<li class="network1"><strong>Bandwidth</strong><br> 
<span class="sliderTextStyle" id="bandwidth"> 2 TB</span></li> 
<li class="cost"><span class="sliderTextStyle2" id="price1">$10.00</span><br>Monthly Cost</li> 
</ul> 
<div class="clr"></div> 
<div class="sliderBtn"> <a id="odernow" href="#/cart.php?gid=4">Order Now</a> </div> 

</div> 
</div> 
<script type="text/javascript"> 
s.setValue(0); 
</script> 
</div> 
+0

: だから私はあなたのような何かを書く必要がありますね? –

+0

HTMLも見ることができますか? –

+0

ええ、助けてもらえます –

答えて

0

同じまま。

UPDATE:ID '帯域幅' を持つ要素は何

_('bandwidth').innerHTML = Math.round(packages[new_value][3]/(1024*1024)) + " TB"; 
関連する問題