无法从用于范围滑块的函数中获取函数参数值

时间:2017-04-13 17:49:00

标签: javascript

另一个javascript新手在这里。

我整个星期都在进行搜索,并且学到了很多但仍然无法使我的脚本正常工作。我的项目是混合PHP / Mysqli / Javascript,但我对Javascript很新。

我正在尝试使用范围滑块来选择产品,然后选择一个产品后,可以使用多个范围滑块来选择有关该产品的更多详细信息,依此类推,...

计划A是做一些事情,比如改变第二个三重滑块的不透明度,直到选择了主要产品,但是我只是试图让机制触发第二步而被卡住了太长时间。我希望使用一个简单的If语句可以做到这一点,但我似乎无法在函数之外得到任何东西来查看其中的参数值。我以为我理解范围但是我学到的规则在这种情况下工作得不太热。

这是一个非常简化的脚本,用于了解我在做什么:

<html>
<head>
<style>
input.prod_slider{
    width:250px;
    height:30px;
    padding:10px;
    background-color:gainsboro;
}
input.det_sliders{
    width:250px;
    height:30px;
    padding:10px;
    background-color:gray;
}

</style>
</head>
<body>


<input class='prod_slider' type='range' id='prod_choice' min='0' max='3' step='1' oninput='choiceSlide(value)'>

<p style='display:inline;' id='prod_777' >Use Slider To Choose A Product</p>

<!-This is the DIV I hoped to change the opacity on...>
<div id='detail_sliders'>
<input  class='det_sliders'type='range' id='detail_0' min='0' max='3' step='1' ><br>
<input  class='det_sliders'type='range' id='detail_1' min='0' max='3' step='1' ><br>
<input  class='det_sliders'type='range' id='detail_2' min='0' max='3' step='1' ><br>
</div>

<div id='testDiv'></div>

<script>

var prodArr = ["product_1","product_2","product_3","product_4"];

var varNum1;

function choiceSlide(value_1){
 key_1 = +value_1;
 document.getElementById('prod_777').innerHTML = prodArr[key_1];
 varNum1 = arguments[0];
 return varNum1;
}

   document.getElementById('testDiv').innerHTML = 'VarNum Value: ' + varNum1;

if (varNum1){
   document.getElementById('detailSliders').style.opacity = '1';    
    }
    else{
   document.getElementById('detailSliders').style.opacity = '.5';   
    }
</script>
</body>
</html>

简化版本2:

<html>
<body>  
<input class='prod_slider' type='range' id='prod_choice' min='0' max='3' step='1' oninput='choiceSlide(value)'>
<p style='display:inline;' id='prod_777' >Use Slider To Choose A Product</p>
<div id='testDiv'>Test Div</div>
<script>
var prodArr = ["product_1","product_2","product_3","product_4"];
var varNum1;
function choiceSlide(value_1){
 key_1 = +value_1;
 document.getElementById('prod_777').innerHTML = prodArr[key_1];
 varNum1 = arguments[0];
}
document.getElementById('testDiv').innerHTML = 'VarNum Value: ' + varNum1;
</script>
</body>

可能有更好的方法来做到这一点,我很乐意听到,但我真的想知道我在将来做错了什么。非常感谢任何可以帮助我的人。谢谢!

0 个答案:

没有答案