0

another javascript newbie here.

I have been doing searches all week and have learned a lot but still can't get my script to work properly. My project is mixed PHP/Mysqli/Javascript but I am pretty new to Javascript.

I am trying to use a range slider to select a product then once one is chosen, several more range sliders become functional for selection of more details about that product then so on, so on,...

Plan A was to do something like change the opacity of the second trio of sliders until the main product is chosen but I have been stuck way too long just trying to get a mechanism to trigger the second step. I was hoping that using a simple If statement could do the trick but I can't seem so get anything outside of the function to see the argument values within it. I thought I understand Scope but what rules I have learned aren't working too hot in this case.

Here is a greatly-simplified script to get an idea of what I am doing:

<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>

Simplified Version Number 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>

There may be better way to do this which I would love to hear about but I really would like to learn what I am doing wrong for use in the future. Thanks so much to any one who can help me. Thanks!!

John
  • 31
  • 2
  • The code where you're trying to use `varNum1` runs **before** `choiceSlide` runs, and runs only once. Instead, put the logic you want to use *inside* `choiceSlide` (or inside a function `choiceSlide` calls), so that it runs *after* `varNum1` has a value assigned to it, and runs every time the `input` event fires on your element. – T.J. Crowder Apr 13 '17 at 17:52
  • Thanks for the comments. I thinned the script down to the bare minimum and I still can't figure out how to get variable varNum1 value out of the function. See second version above. – John Apr 14 '17 at 02:35
  • Again, move the last line of that *into* `choiceSlide` (or into a function `choiceSlide` calls). Again, it's `undefined` as of where you're using it, see the linked question's answers for details (and my comment above). – T.J. Crowder Apr 14 '17 at 07:59
  • Not to be difficult (I really appreciate your help) but I don't see where the linked AJAX thread directly applies to what I am trying to learn. Also, I understand that I can move that line into the function and it will work, I want to know how I can use that argument value outside of the function and preferably in a separate function. I am not trying to test your patience, I want to learn! Thanks! – John Apr 17 '17 at 14:01
  • The issues are exactly the same: In your code above, you're trying to use the variable's value before the value is assigned to it, just like in the linked thread. And as I've said above, you **can** use it from another function if you want. Just note that that function will use the value as of when you call that function. It'll see the most recent value stored in the variable. If the `input` event has never fired (which by definition it hasn't in your code above using `varNum1`), the value in the variable will be `undefined`. – T.J. Crowder Apr 17 '17 at 14:12
  • I understand, thanks. There are some new thinks that will take some getting used to. BTW, that thread you linked is hard to understand for a beginner. – John Apr 18 '17 at 14:12

0 Answers0