How to pass input value from a HTML to JavaScript to be used for switching the cases which contains functions

Question

This are two different files where JavaScript file is referenced from html page.

When i try two run the code it does run only default case for switch statement and not the other cases.

THIS IS THE JAVASCRIPT FILE.

var gaadi = ["Santro", "Mercedes", "Maruti"];
var gaadi2 = ["Audi", "Honda", "Hyundai"];
var gaadi3 = ["Car1", "Car2"];



function selection()
{
    var input;
    input = document.getElementById("input").value;
    
    switch (input)
    {
    case 0: function myFunction(){
        
        var person ={firstName:"R",
                     lastName:"J",
                     id:2459,
                     fullName:function(){
                        x = 12.678;
                         return parseFloat(x);
                     }};
    
    document.getElementById("demo").innerHTML=gaadi;
        
    
}
        break;
    case 1: function myFunction2(){
        
        
        document.getElementById("demo").innerHTML = gaadi2;
    
    }

        break;
        
    case 2: function myFunction3(){
        var gaadimeet = gaadi.concat(gaadi2,gaadi3);
        var gaadislice = gaadimeet.slice(2,5);
        document.getElementById("demo").innerHTML= gaadimeet.sort();
        document.getElementById("demo").innerHTML= gaadislice;
    }
    
        break;
        
    case 3: function myFunction4()
    {       
        if(gaadi[0] =="Santro") {
        document.getElementById("demo").innerHTML = "There is car";
    }
        else {
        document.getElementById("demo").innerHTML = "There is no such car";
             }
    }
        break;
            

    default: document.getElementById("demo").innerHTML="Sorry Wrong Input";
            
    }
}
    
    

THIS IS THE HTML FILE

<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
    
</head>
<body>
    
   
    <h1 id="demo">Display</h1>
    
    
    <br>
    
    <input id="input" value="0" />
    
    <button onclick="selection()">Click Here</button>
    <script src="myScript.js"></script>
    </body>
</html>

Horken · Accepted Answer · 2017-06-27 02:01:02Z

the first problem like @Nasim Bahar metion you have to change int to string make switch to know which options you selected, second off, if I'm guess not wrong, you wanna trigger fn when switch to target case, am I right?? if that so, you have to change your case function to IIFE function, the it will trigger function by itself.

I just make some change on sample for you

case '0':(function myFunction(){

            var person ={firstName:"R",
                         lastName:"J",
                         id:2459,
                         fullName:function(){
                            x = 12.678;
                             return parseFloat(x);
                         }};

            document.getElementById("demo").innerHTML=gaadi;


        })()
        break;

and the working Demo Below

        var gaadi = ["Santro", "Mercedes", "Maruti"];
        var gaadi2 = ["Audi", "Honda", "Hyundai"];
        var gaadi3 = ["Car1", "Car2"];



        function selection() {
            var input;
            input = document.getElementById("input").value;
            
            switch (input) {
            case '0': (function myFunction(){
                
                var person ={firstName:"R",
                             lastName:"J",
                             id:2459,
                             fullName:function(){
                                x = 12.678;
                                 return parseFloat(x);
                             }};
            
                document.getElementById("demo").innerHTML=gaadi;
                    
                
            })()
                break;
            case '1': (function myFunction2(){
                            
                            
                            document.getElementById("demo").innerHTML = gaadi2;
                        
                        })()

                break;
                
            case '2': (function myFunction3(){
                            var gaadimeet = gaadi.concat(gaadi2,gaadi3);
                            var gaadislice = gaadimeet.slice(2,5);
                            document.getElementById("demo").innerHTML= gaadimeet.sort();
                            document.getElementById("demo").innerHTML= gaadislice;
                        })()
            
                break;
                
            case '3': (function myFunction4()
                        {       
                            if(gaadi[0] =="Santro") {
                            document.getElementById("demo").innerHTML = "There is car";
                        }
                            else {
                            document.getElementById("demo").innerHTML = "There is no such car";
                                 }
                        })()
                break;
                    

            default: document.getElementById("demo").innerHTML="Sorry Wrong Input";
                    
            }
        }

<h1 id="demo">Display</h1>
    
    
    <br>
    
    <input id="input" value="0" />
    
    <button onclick="selection()">Click Here</button>

Thanks. It really helped me to move ahead. Thanks for sharing IIFE which i would have not know.

Nasim Bahar · Accepted Answer · 2016-11-18 03:30:53Z

0

if you write case "0": my be it will work. because from form control return string and your case statement is integer.

case '0':
//do somthing

answered Nov 18, 2016 at 3:30

Nasim Bahar

1153 silver badges13 bronze badges

3 Comments

Rakesh Jain Over a year ago

I tried to but i didn't work and in JavaScript it automatically converts string to integer.

Nasim Bahar Over a year ago

Convert your input to Integer .. ParseInt(document.getElementById("input").value)

Rakesh Jain Over a year ago

I tried and it is working and taking input as an integer, but not able to execute the switch cases having functions

Collectives™ on Stack Overflow

How to pass input value from a HTML to JavaScript to be used for switching the cases which contains functions

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related