Я создал форму, которая создает пользовательское предложение на основе ввода пользователя. Я хочу сделать условный ввод, что приведет к условному добавлению к предложению. Если пользователь выбирает «Хорошо» (id = «z4») для состояния автомобиля, я хочу «Почему?» (id = "z5") выпадающее меню, чтобы появиться. Затем после того, как он или она выбирает один из вариантов из «Почему?» выпадающий список, который добавляется к предложению.
Например-
Пользовательский ввод 2012 Honda Civic, 96 000, красный, хорошо. Выходное предложение выглядит следующим образом: На продажу выставлен Honda Civic 2012 года с пробегом 96 000 миль. Это закончено в красном . Он находится в хорошей форме .
Пользователь вводит 2012 Honda Civic, 96 000, красный, все в порядке, вмятины. Выходное предложение выглядит следующим образом: На продажу выставлен Honda Civic 2012 года 96 000 миль. Это закончено в красном . Он в хорошей форме , потому что имеет некоторые вмятины .
Есть идеи?
<!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>