Passing input value to a variable-CodePudding

EDIT:

This is an example code I found online about polymorphism, I changed it a little bit and got rid of if-else statements. I directly pass the selected value to v and then try to run:

<!DOCTYPE html>
<html>
   <head>
      <title>
         Polymorphism in JavaScript
      </title>
   </head>
   <body>
      <div class = "results">
         <h2> Polymorphism in JavaScript </h2>
         <form>
            <p> Please select your Vehicle type: </p>
            <select id="input">
               <option value="Car">Car</option>
               <option value="Truck">Truck</option>
            </select>
            <br>
            <input type="button" value="Submit" onclick = "processData(this.form)">
         </form>
         <div class = "resultText">
            <p id = "result"> </p>
         </div>
      </div>
      <script type = "text/javascript">
         class Vehicle {
         run() {
         return " Vehicle is running " ;
         }
         }
         class Car extends Vehicle {
         run() {
         return " Car is running " ;
         }
         }
         class Truck extends Vehicle {
         run() {
         return " Truck is running " ;
         }
         }
         function processData(form) {
         v = document.getElementById("input").value;
         console.log(v);
         msg = v.run();
         document.getElementById("result").innerHTML = msg;
         }
      </script>
   </body>
</html>

I'm receiving error "Uncaught TypeError: v.run is not a function"

CodePudding user response：

You can use var v = document.getElementById("input").value; to get the value of a input of a form.

Then you have to take care that you add an id="input" to the html element so that JS knows which input it is.

CodePudding user response：

I don't know if I completely understood what are you trying to do but try this :)

<!DOCTYPE html>
<html>

<head>
    <title>
        Polymorphism in JavaScript
    </title>
</head>

<body>
    <div >
        <h2> Polymorphism in JavaScript </h2>
        <form>
            <p> Please select your Vehicle type: </p>
            <select id="input">
                <option value="Car">Car</option>
                <option value="Truck">Truck</option>
            </select>
            <br>
            <input type="button" value="Submit" onclick="processData()">
        </form>
        <div >
            <p id="result"> </p>
        </div>
    </div>
    <script type="text/javascript">
        class Vehicle {
            run() {
                return " Vehicle is running ";
            }
        }
        class Car extends Vehicle {
            run() {
                return " Car is running ";
            }
        }
        class Truck extends Vehicle {
            run() {
                return " Truck is running ";
            }
        }
        function processData() {
            let vehicle = new Vehicle();
            const selectVal = document.getElementById("input").value;
            if (selectVal === "Car") {
                vehicle = new Car();
            } else if (selectVal === "Truck") {
                vehicle = new Truck();
            }
            document.getElementById("result").innerHTML = vehicle.run();
        }
    </script>
</body>

</html>

Result: