variable forms with a dropdown menu-CodePudding

I have made an dropdown within my form. When I choose one of the dropdown options, another form will appears. So with each dropdown option, there is another form.

I made From1 and added a CSS with opacity = 0. When I click in my dropdown on 1, I want to set the opacity of Form1 to opacity=1;

my code;

<select id="products" onchange="test">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
 </select>

<form id="Form1">
    
    <text>Primary side </text>

</form>    



<script type="text/javascript">
function test()
{
    var a = document.getElementById("products").value;
    if(a ==='1'){
     var document.getElementById("Form1").style.opacity =1;
    }
    else if(a==="2")
    {
        var 
    }
    else if(a==="3")
    {
        var
    }
    else if(a==="4")
    {
        var
    }
    else if(a==="5")
    {
        var
    }
    else if(a==="6")
    {
        var
    }
}
</script>

CodePudding user response：

your opacity change statment is correct except the var. You are not declating anything.

change var document.getElementById("Form1").style.opacity =1;

to document.getElementById("Form1").style.opacity =1; in your if statment and assuming your if statments constraint passes the opacity will change.

BONUS: I reccommend you set the display to none and change the display propery when you want to display it instead of manipulating opacity.