如何正确地实现(或者更好地组织)这个JavaScript函数？
如何正确地实现(或者更好地组织)这个JavaScript函数？
提问于 2017-10-17 00:29:10
我对JavaScript很陌生，我需要帮手。我在我的网页上有一个用户评审表。这是一个有10个下拉框的行，允许用户回答关于学生的问题，评分范围为1-5。如果用户为其中任何一个选择<2，则会出现一个文本框来提示他们解释低评级(称之为LowRatingPopUp)。有一个按钮可以添加另一个要复习的学生。单击该按钮时，会动态添加一个新的审阅表单(称为NewStudent)。
我遇到的问题是打印/显示新表单。在NewStudent函数中，我在函数中将表单连接为一个大字符串来重新打印everything.It，因此在按下按钮时不能正确地创建新的LowRatingPopUp。代码不能包含在内，否则它会打碎页面。它还使得Function-2中有大量代码。
默认HTML部分：
<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> 点击按钮时的JS函数：
function ReviewForm() {
room++;
var objTo = document.getElementById('ReviewForm')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass" + room);
var rdiv = 'removeclass' + room;
divtest.innerHTML = '<hr>' +
'<h2>Student:</h2>' +
'<select>' +
'<option value="Adam">Adam</option> ' +
'<option value="Bob">Bob</option> ' +
'<option value="Corey">Corey</option>' +
'</select></h2>' +
'<div class="table-wrapper">' +
'<table>' +
'<thead>' +
'<tr>' +
'<th>Motivation/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>' +
' </tbody>' +
' <tfoot>' +
' </tfoot>' +
' </table>' +
//If I add the next chunk of code to the function, it breaks the functionality of the JS on the page
/* '<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." />'+
'<br/>'+
'</div>'+*/
'</div>'
objTo.appendChild(divtest)
}回答 2
Stack Overflow用户
发布于 2017-10-17 00:42:18
在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);
Stack Overflow用户
发布于 2017-10-17 00:46:30
您可以使用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，所以使用了在所有其他浏览器上都能工作的实现。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46774957
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号