我有一个单词匹配练习，需要一组输入。程序从输入框中读取 html。然后 html 显示在 textarea 元素中。当用户单击“显示答案”时，将显示一组键和描述
输出的屏幕截图看起来像
生成答案字符串的方法是这样写的
//has the html already been generated?
if(!htmlGenerated){
//fetch the results box
results = document.getElementById("results");
//create textarea
textarea = document.createElement("textarea");
textarea.setAttribute("id","generated_html_textarea");
// initialize blank html
header = '<!DOCTYPE HTML>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Word Matching Exercise</title>\n\t\t<style>\n*:focus {outline: 2px solid blue; outline-offset: 2px;}\n\t\tdetails {padding:3px;}\n\t\t</style>\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"${pageContext.request.contextPath}/static/css/boxes.css\" />\n\t\t<script type=\"text/javascript\" src=\"${pageContext.request.contextPath}/static/js/event1.js\">';
header += "<link rel=\"stylesheet\" type=\"text/css\" href=\"${pageContext.request.contextPath}/static/css/style.css\" />"
header += '</'
header += 'script>\n'
header += '<script async src=\"https://www.googletagmanager.com/gtag/js?id=UA-89940905-27\">'
// header += '</'
// header += 'script>\n<script>\n\t window.dataLayer = window.dataLayer || [];\n\t function gtag(){dataLayer.push(arguments)};\tgtag(\"js\", new Date());\tgtag(\"config\", \"UA-89940905-27\");\n'
header += '</'
header += 'script>\n'
header += '<script src="${pageContext.request.contextPath}/static/js/jquery-1.7.2.min.js">'
header += '</'
header += 'script>\n'
header += '<script src="${pageContext.request.contextPath}/static/js/jquery-ui.min.js">'
header += '</'
header += 'script>\n'
header += '<script src="${pageContext.request.contextPath}/static/js/jquery.ui.touch-punch.min.js">'
header += '</'
header += 'script>\n'
header += '<script src="${pageContext.request.contextPath}/static/js/event1.js">'
header += '</'
header += 'script>\n'
header += '<script src="${pageContext.request.contextPath}/static/js/jquery.alerts.js">'
header += '</'
header += 'script>\n'
header += '<link href="${pageContext.request.contextPath}/static/js/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen">'
header += '<script type=\"text/javascript\" src=\"${pageContext.request.contextPath}/static/js/logging.js\">'
header += '</'
header += 'script>\n</head>\n\t\t<body>';
let html = '';
html += header;
html += '<div id=\'maincontentstyle\'>\n'
html += '\t<center>\n'
html += '\t\t<div id=\'boxstyle\'>\n'
html += '\t\t\t<h3 id=\'title\'>'+title+"</h3>\n";
//create key inputs
html += '\t\t\t\t<center>\n'
html += '\t\t\t\t\t<div class=\'source\'>\n'
console.log("The value of the dlArray is")
console.log(dlArray)
console.log("The value of the elArray is")
console.log(elArray)
dlArray = shuffle(dlArray);
for (let i = numberOfInputs; i < elArray.length+numberOfInputs; i++){
html += '\t\t\t\t\t\t<div id=\'s';
id = (1+i-numberOfInputs);
html += id;
html +='\' class=\'draggyBox-small ui-draggable\'>\n';
html += '\t\t\t\t\t\t\t'
html += elArray[i-numberOfInputs]
html += '\n';
html +='\t\t\t\t\t\t</div>\n';
}
html += '\t\t\t\t\t</div>\n'
html += '\t\t\t\t\t</center>\n'
//create description inputs
html += '\t\t\t\t\t<table id=\'tablestyle\'>\n'
for (let i = numberOfInputs; i < dlArray.length+numberOfInputs; i++){
html +='\t\t\t\t\t\t<tr>\n'
html += '\t\t\t\t\t\t<td id=\'row';
id = (1+i-numberOfInputs);
html += id;
html +='\'>\n';
html += '\t\t\t\t\t\t\t<div id=\'t';
html += id;
html +='\' class=\'ltarget ui-droppable\'>'
html +='</div>\n'
html +='\t\t\t\t\t\t</td >\n'
html +='\t\t\t\t\t\t<td id=\'d'
html += id
html += '\'>\n'
html += '\t\t\t\t\t\t\t';
html += dlArray[i-numberOfInputs];
html += '\n';
html +='\t\t\t\t\t\t\t</td >\n'
html +='\t\t\t\t\t\t</tr>\n';
}
html += '\t\t\t\t\t</table>\n';
html += '\t\t\t\t</center>\n'
html += '\t\t</div>\n'
html += '\t</center>\n'
html += '</div>'
html += '<span style=\"padding: 3px\"> <button id =\"one\" class=\"button\" type=\"button\" onClick=\"show_answer'
html += '()'
html += '"'
html += ">"
html += 'Show Answer'
html += '</'
html += 'button> <button id = \"resetButton\" class=\"button\" type=\"button\" onClick=\"reset'
html += '()'
html += '"'
html += '>'
html += 'Reset'
html += '</'
html += 'button>'
html += '</span>'
footer = '\n\t\t</body>\n</html>\n';
footer += ''
footer += '<script type="text/javascript">'
footer += '$(init);'
footer += '$( window ).unload(function() {'
footer += 'removeStorage.removeItem("someVarKey1");'
footer += '});'
footer += 'function reset() {'
footer += ' var someVarName = true;'
footer += 'sessionStorage.setItem("someVarKey1", someVarName);'
footer += 'window.location.reload();'
footer += '}'
footer += 'function init() {'
footer += ' document.getElementById(\'resetButton\').style.display = \'none\';'
footer += 'document.getElementById("resetButton").style.visibility = "hidden";'
footer += 'if (false && sessionStorage.getItem("someVarKey1"))'
footer += '$("#one").focus();'
footer += 'var numbers = ['
for (let i = numberOfInputs; i < dlArray.length+numberOfInputs; i++){
footer += dlArray[i-numberOfInputs].replace ( /[^\d.]/g, '' );
footer += ',';
}
footer += '];'
footer += 'initialize(numbers);'
footer += '}'
footer += '</script>'
footer += ' <script>'
footer += ' answer = '
footer += '\"'
answer = '';
for (let i = numberOfInputs; i < dlArray.length+numberOfInputs; i++) {
answer += elArray[i-numberOfInputs];
console.log(answer)
answer += ':';
answer += dlArray[numberOfInputs-i];
console.log(answer)
answer += ' '
}
footer += answer
console.log(answer)
footer += '\"'
footer += ';'
// footer += '\n'
// footer += ' Iteration: is one time execution of the loop body.'
// footer += '\n'
// footer += 'Loop Continuation Condition: is a Boolean expression that controls the execution of the loop.'
// footer += '\n'
// footer += 'Infinite Loop: is a loop that runs forever due to an error in the code.'
// footor += '\n'
// footer += 'Off-by-one: is an error in the program that causes the loop body to be executed one more or less time."'
footer += ' function show_answer() {'
footer += ' jAlert(answer, \'Correct Match\');'
footer += ' }'
footer += '</script>'
footer += ' '
footer += '<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/GetElementPosition3.js"></script>'
footer += ' <script>'
footer += '// $(function(){'
footer += '// if (\'speechSynthesis\' in window) {'
footer += '// speechSynthesis.onvoiceschanged = function() {'
footer += '// var $voicelist = $(\'#voices\');'
footer += '//'
footer += '// if($voicelist.find(\'option\').length == 0) {'
footer += '// speechSynthesis.getVoices().forEach(function(voice, \'index) {'
footer += '// var $option = $(\'<option>\')'
footer += '// .val(index)'
footer += '// .html(voice.name + (voice.default ? \' (default)\' :\'\'));'
footer += '//'
footer += '// $voicelist.append($option);'
footer += '// });'
footer += '//'
footer += '// $voicelist.material_select();'
footer += '// }'
footer += '// }'
footer += '// } '
footer += '//}); '
footer += 'audioOn = false;'
footer += '$(function() {'
footer += '$(\'.menulink\').click(function(){'
footer += ' if (audioOn) {'
footer += ' $("#bg").attr(\'src\',"audioOff.png"); '
footer += ' audioOn = false;'
footer += ' }'
footer += ' else {'
footer += ' $("#bg").attr(\'src\',"audioOn.png");'
footer += ' audioOn = true; speak(" ");'
footer += ' }'
footer += ' return false;'
footer += '});'
footer += '});'
footer += ' </script> '
html += footer;
// html generation is done.
htmlGenerated = true;
textarea.value = html;
results.replaceChildren(textarea);
// Generate reset, show answer, , and render html buttons
controls = document.createElement("div");
controls.setAttribute("id","program1");
controls.setAttribute("style","border: 1px solid #EB0D1B; width: 360px; font-family: courier; font-size: 100.5%; margin: 0px auto; border: 1px; text-align: center; margin-top: 5px;");
controls.innerHTML += '<button id = "renderHTMLButton" class="button" type="button" onClick="render_html()">Render html</button>\n';
controls.innerHTML += '<button id = "submit" class="button" type="button" onClick="saveContent()"> Save </button>\n';
controls.innerHTML += `<button id=\"view_button\" class=\"button\" style=\" display: none;\"><a href=\"${window.location.href}/${saved_id}\"> view</a> </button>\n`;
if(document.getElementById("renderHTMLButton"))
results.parentNode.replaceChild(controls);
results.parentNode.appendChild(controls);
}
}
这就是问题所在
for (let i = numberOfInputs; i < dlArray.length+numberOfInputs; i++) {
answer += elArray[i-numberOfInputs];
console.log(answer)
answer += ':';
answer += dlArray[numberOfInputs-i];
console.log(answer)
answer += ' '
}
控制台日志输出返回
k1:d1
word_match.js:189 k1:d1 k2
word_match.js:192 k1:d1 k2:undefined
word_match.js:196 k1:d1 k2:undefined
预期的：
k1:d1 k2:k2 k3:k3
实际的：
k1:d1 k2:undefined k3:undefined
任何帮助理解为什么此错误不断出现将不胜感激。