JavaScript的新手，我可以在这里使用。我的网页上有一个用户评论表单。它是一排有10个下拉框，允许用户回答有关评分等级为1-5的学生的问题。如果用户选择＆lt; 2对于其中任何一个，它们会被提示一个文本框来解释低评级（称之为LowRatingPopUp）。有一个按钮可以添加另一个学生进行审核。单击该按钮时，将动态添加新的审阅表单（称为NewStudent）。
我遇到的问题是打印/显示新表格。在NewStudent函数中，我将表单连接为函数中的大字符串以重新打印所有内容。因此，当按下按钮时，没有正确创建新的LowRatingPopUp。代码无法包含或破坏页面。它还使大量代码在Function-2中。
默认HTML部分：
Snackbar.make(getCurrentFocus(),"settings clicked",Snackbar.LENGTH_LONG).show();
单击按钮时的JS功能：
<section>
<!-- Form -->
<form method="post" action="#">
<div class="row uniform">
<!-- Break -->
<div class="12u$">
<h3>Please use the following scale when rating the student:</h3>
<ul style="list-style: none" ;>
<li>1 = Poor</li>
<li>2 = Less than acceptable</li>
<li>3 = Satisfactory</li>
<li>4 = Very good</li>
<li>5 = Excellent</li>
</ul>
<div style="height:550px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">,<!-- container for reviews-->
<div id="ReviewForm">
<hr>
<h2>
Student:
<select>
<option value="Adam">Adam</option>
<option value="Bob">Bob</option>
<option value="Corey">Corey</option>
</select>
</h2>
<div class="table-wrapper" ; text-align: center;>
<table>
<thead>
<tr>
<th>Motivation and general attitude</th>
<th>Educational initiative & Scholarship</th>
<th>Understanding of course material</th>
<th>Ability to apply course material</th>
<th>Oral English expression skills</th>
<th>Written English expression skills</th>
<th>Ability to analyze/integrate/apply</th>
<th>Ethical standards & integrity</th>
<th>Respect for diversity</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<div id="Other" class="showother" style="display:none" name="textbox" id="textbox" type="text">
</div>
</tbody>
</table>
<div style='display:none;' id='business'>
<input type='text' class='text' name='business' placeholder="You gave a rating of less than 3 in one or more categories. Please provide a brief explination as to why." /><!--LowRatingPopUp-->
<br/>
</div>
</div>
</div>
</div>
</div>
</form>
<input type="hidden" name="count" value="1" />
<div class="control-group" id="fields">
<label class="control-label" for="field1"></label>
<div class="controls" id="profs">
<form class="input-group-btn">
<div>
<button class="btn btn-success" type="button" onclick="ReviewForm();">Add another student</button>
</div>
</form>
<br>
<br>
</div>
</div>
</section>
答案 0 :(得分：0)
在ES6中，您可以使用模板字符串（反引号）进行构造并连接大型和多行字符串：
https://developers.google.com/web/updates/2015/01/ES6-Template-Strings
var name = 'Mike';
var inner = ` <div> \
<h2> hello ${name} </h2> \
</div> `;
console.log(inner);
答案 1 :(得分：0)
您可以使用onChange元素创建仅检查每个表单项的函数，然后如果选择了某些选项，则具有独立的js函数显示隐藏文本区域。这是我正在谈论的一个例子。
function typeCheck(that){
if (that.value == "data"){
document.getElementById("ifdata").style.display = "inherit";
document.getElementById("ifvoice").style.display = "none";
}
else if (that.value == "voice"){
document.getElementById("ifdata").style.display = "none";
document.getElementById("ifvoice").style.display = "inherit";
}
else if (that.value == "full"){
document.getElementById("ifdata").style.display = "inherit";
document.getElementById("ifvoice").style.display = "inherit";
}
else {
document.getElementById("ifdata").style.display = "none";
document.getElementById("ifvoice").style.display = "none";
}
}<select id="type" name="type" cols="4" onchange="typeCheck(this);">
<option value=""></option>
<option value="voice">Voice</option>
<option value="data">Data</option>
<option value="full">Full</option>
</select>
<div id="ifdata" style="display: none;">
<label for="CID">Circuit ID(s):</label>
<textarea id="CID" name="CID" rows="4"></textarea>
</div>
<div id="ifvoice" style="display: none;">
<label for="TN">Telephone Number(s):</label>
<textarea id="TN" name="TN" rows="4"></textarea>
</div>
免责声明：此解决方案使用style.display ='none';这在Safari上不起作用。 Safari要求您将元素放在页面顶部。
对于我的用例，不需要Safari兼容性，因此使用了适用于所有其他浏览器的实现。