将输入值传递给变量

发布于 2025-01-15 18:45:24 字数 1613 浏览 1 评论 0原文

编辑：

这是我在网上找到的有关多态性的示例代码，我对其进行了一些更改并删除了 if-else 语句。我直接将选定的值传递给 v，然后尝试运行：

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

我收到错误“Uncaught TypeError: v.run is not a function”

原文

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"

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小嗲 2025-01-22 18:45:24

您可以使用 var v = document.getElementById("input").value; 来获取表单输入的值。

然后你必须注意在 html 元素中添加一个 id="input" 以便 JS 知道它是哪个输入。

回复收藏 0 原文

夏有森光若流苏 2025-01-22 18:45:24

我不知道我是否完全理解你想做什么，但试试这个:)

<!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()">
        </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() {
            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>

结果：

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 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()">
        </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() {
            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:

回复收藏 0 原文

~没有更多了~