我创建了一些输入和下拉菜单,这些输入和下拉菜单被馈送到JavaScript命令中以创建自定义语句。用户输入或选择的任何内容都会添加到句子框架中。当用户选择提交时,将创建该句子。这很简单。尝试为其中一个输入创建条件语句时遇到麻烦。
如果用户在“遏制皮疹”中选择“否”?下拉菜单中,仍然显示“ input5”和“ input6”中的文本。这段文字显示为“在路边有小块皮疹”和“在路边有大块皮疹”。如何更改代码,以便如果选择“否”,这些输入将不会出现在句子中?
当前,如果选择“否”,则读取(**请注意,我添加的第一个输入是“ 2012 VW GTI”,最后一个输入是“红色”):
“这是我的2012大众GTI。它处于良好状态。车辆的轮辋没有遏制皮疹。车门上没有轻微的遏制皮疹。它在车上有严重的遏制皮疹。2012大众GTI的颜色是红色。”
如果选择“否”,我希望它如何读取:
“这是我的2012大众GTI。它状况良好。车辆的轮辋没有遏制皮疹。2012大众GTI的颜色是红色。”
<!DOCTYPE html>
<html>
<head>
<title>Hi</title>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
<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;}
.chosen-select {width:200px}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<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 {
const input1 = document.getElementById("z1").value;
var input2;
if (document.getElementById("z2").value == "none") {
input2 = "The vehicle's rims have no curb rash"
}
else if (document.getElementById("z2").value == "yes"){
input2 = "The vehicle's rims have curb rash"
}
var input3 = $('#z3').val();
console.log(input3);
var input3Formatted = "";
if(input3.length==1){
// Only one value...
input3Formatted = input3[0];
}
if(input3.length==2){
// Two values... Just add and "and"
input3Formatted = input3[0]+" and "+input3[1];
}
if(input3.length>2){
// more than 2 values...
for(i=0;i<input3.length-1;i++){
input3Formatted += input3[i]+", ";
}
input3Formatted += "and "+input3[input3.length-1];
}
var input4 = $('#z4').val();
console.log(input4);
var input4Formatted = "";
if(input4.length==1){
// Only one value...
input4Formatted = input4[0];
}
if(input4.length==2){
// Two values... Just add and "and"
input4Formatted = input4[0]+" and "+input4[1];
}
if(input4.length>2){
// more than 2 values...
for(i=0;i<input4.length-1;i++){
input4Formatted += input4[i]+", ";
}
input4Formatted += "and "+input4[input4.length-1];
}
const input5 = "It has minor curb rash on the "+input3Formatted+"."
const input6 = "It has major curb rash on the "+input4Formatted+"."
const input7 = document.getElementById("z5").value;
document.getElementById("s1").value =
"This is my " +input1+ ". It is in good condition. " +input2+". "+input5+" "+input6+" The "+input1+"'s color is "+input7+"."
}
}
function reset() {
document.getElementById("s1").value = "";
}
</script>
<script type="text/javascript">
$(function() {
$(".chosen-select").chosen({
disable_search_threshold: 4
});
$("#z2").chosen().change(function(){
if ($(this).val() === 'none'){
$("#z3").parent().hide();
$("#z4").parent().hide();
}
else if ($(this).val() === 'yes'){
$("#z3").parent().show();
$("#z4").parent().show();
}
});
function hide() {
$("#z3").parent().hide();
$("#z4").parent().hide();
}
// call hide AFTER .chosen() has been invoked on the visible elements
hide();
});
</script>
</head>
<body>
<table>
<tr>
<td>
<input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100">
</td>
<td>
<select data-placeholder="Curb Rash?" name="curbrash" class="chosen-select" id="z2">
<option value="" disabled selected></option>
<option value="yes">Yes</option>
<option value="none">No</option>
</select>
</td>
<td>
<select data-placeholder="Minor Curb Rash" name="minorrash" multiple class="chosen-select" id="z3">
<option value=""></option>
<option value="front left rim">Front Left Rim</option>
<option value="back left rim">Back Left Rim</option>
<option value="front right rim">Front Right Rim</option>
<option value="back right rim">Back Right Rim</option>
</select>
</td>
<td>
<select data-placeholder="Major Curb Rash" name="majorrash" multiple class="chosen-select" id="z4">
<option value=""></option>
<option value="front left rim">Front Left Rim</option>
<option value="back left rim">Back Left Rim</option>
<option value="front right rim">Front Right Rim</option>
<option value="back right rim">Back Right Rim</option>
</selct>
</td>
<td>
<input type="text" id="z5" placeholder="Color" name="name" maxlength="100">
</td>
</tr>
</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>
答案 0 :(得分:0)
最简单的方法是将句子保存在变量中,所以这一行:
shopt -s extglob
只会是:
document.getElementById("s1").value =
"This is my " +input1+ ". It is in good condition. " +input2+". "+input5+" "+input6+" The "+input1+"'s color is "+input7+"."
然后,您可以在条件内部设置WhateverVariable(如果需要,可以添加input4 / input5),并在继续输入时增加字符串。