I created a form that produces a custom sentence based on a user's input. I want to make a conditional input thus leading to a conditional addition to the sentence. If the user selects "Okay" (id="z4") for the vehicle condition, I want the "Why?" (id="z5") dropdown menu to appear. Then after he or she selects one of the options from the "Why?" dropdown that is added to the sentence.
For example-
-
The user inputs 2012 Honda Civic, 96,000, red, good. The output sentence is as follows: Up for sale is a 2012 Honda Civic with 96,000 miles. It is finished in red. It is in good shape.
-
The user inputs 2012 Honda Civic, 96,000, red, okay, dents. The output sentence is as follows: Up for sale is a 2012 Honda Civic with 96,000 miles. It is finished in red. It is in okay shape because it has some dents.
Any ideas?
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<style type="text/css">
table,td,th {margin-left: auto;margin-right: auto}
.display {display: flex;align-items: center;justify-content: center;}
p {text-align: center;}
textarea {display: block;margin-left:auto;margin-right: auto;}
</style>
<script type="text/javascript">
function sentence() {
document.getElementById("s1").value = "";// reset
document.getElementById("s1").style.display = "block";
document.getElementById("r1").style.display = "block";
if (document.getElementById("z1").value == "") {
alert("Year, Make, and Model are needed");
document.getElementById("z1").focus();
} else if (document.getElementById("z2").value == "") {
alert("Mileage is needed");
} else if (document.getElementById("z3").value == "") {
alert("Exterior color is needed");
} else {
const input1 = document.getElementById("z1").value;
const input2 = document.getElementById("z2").value;
const input3 = document.getElementById("z3").value;
const input4 = document.getElementById("z4").value;
document.getElementById("s1").value =
"Up for sale is a " + input1 + " with " + input2 + " miles. It is finished in "
+ input3 + ". It is in " + input4 + " shape.";
}
}
function reset() {
document.getElementById("s1").value = "";
}
function hide() {
document.getElementById("s1").style.display = "none";
document.getElementById("r1").style.display = "none";
}
</script>
</head>
<body onload="hide()">
<table>
<tr>
<td> <input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100"></td>
<td> <input type="text" id="z2" placeholder="Mileage" name="name" maxlength="100"></td>
<td> <input type="text" id="z3" placeholder="Exterior Color" name="name" maxlength="100"></td>
<td> <select name="condition" id="z4"> <option value="" disabled selected>Condition</option> <option value="excellent">Excellent</option> <option value="good">Good</option> <option value="okay">Okay</option></select></td>
<td> <select name="condition" id="z5"> <option value="" disabled selected>Why?</option> <option value="scratches">Scratches</option> <option value="dents">Dents</option> <option value="mechanical issues">Mechanical Issues</option></select></td>
</table>
<br>
<div class="display">
<button onclick="sentence()"> Submit </button>
</div>
<hr>
<br>
<textarea rows="10" cols="100" id="s1">
</textarea>
<br>
<div class="display">
<button onclick="reset()" id="r1">Reset</button>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire