0
192
ViewsPassing input value to a variable
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"
·
Juan Pablo Isaza
2 answers
Answer question0
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.
·
Juan Pablo Isaza
Report
0
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:
·
Juan Pablo Isaza
Report
Answer question