JavaScript-使用呈现函数呈现html-堆栈溢出

顺晟科技

2022-10-19 13:28:36

206

我有一个单词匹配练习，它接受一组输入。程序从输入框中读取html。然后html显示在一个textarea元素中。当用户单击“Render HTML”时，将显示关键字和描述。程序显示的html值取自textarea元素的值。

应为：当用户单击render html时，应该呈现文本区域中新生成的代码。

实际：当用户单击render html时，新生成的代码不会按预期呈现。

我期望程序呈现新生成的代码。例如，

如果单击generated HTML.
然后单击添加更多信息。
然后单击呈现HTML。
然后单击添加更多信息。
然后单击呈现HTML。
然后单击呈现HTML。

我最后得到了呈现的HTML的多个部分。例如，

我最后想做的是

呈现html的方法如下所示。

function render_html(){
      textarea  = document.getElementById("generated_html_textarea");
      // Set the generate html to the value from the textarea.
      generated_html = textarea.value;
      console.log(generated_html);
      // Create a new tab.
      var new_window = window.open('');
      maincontentstyle = document.getElementById("maincontentstyle");
      rendered_html = document.createElement("div");
      rendered_html.setAttribute("id","rendered_html");
      rendered_html.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;");
      rendered_html.innerHTML +=  generated_html;
      rendered_html.innerHTML +='<span style="padding: 3px"> <button id ="one" class="button" type="button" onClick="show_answer()">Show Answer</button> <button id = "resetButton" class="button" type="button" onClick="reset()">Reset</button> </span>';
      results = document.getElementById("results");
      // Append the rendered html to the results tab
      results.appendChild(rendered_html);
      htmlRendered = true;
      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/js/boxes.css\" />\n\t\t<script type=\"text/javascript\" src=\"event1.js?v=9999\">';
      header += '</'
      header += 'script>\n<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>'
      header += '<script src="${pageContext.request.contextPath}/static/js/jquery-ui.min.js">'
      header += '</'
      header += 'script>'
      header += '<script src="${pageContext.request.contextPath}/static/js/jquery.ui.touch-punch.min.js">'
      header += '</'
      header += 'script>'
      header += '<script src="${pageContext.request.contextPath}/static/js/jquery.alerts.js">'
      header += '</'
      header += 'script>'
      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>';
      new_tab_html = header;
      new_tab_html += rendered_html.innerHTML;
      footer = '\n\t\t</body>\n</html>\n';
      footer += '<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/GetElementPosition.3.js">'
      footer += '</'
      footer += 'script>'
      footer += '<script>audioOn = false; $(function() {$(\'.menulink\').click(function(){if (audioOn) {$("#bg").attr(\'src\',\"${pageContext.request.contextPath}/static/images/audioOff.png\");  audioOn = false;}else {$(\"#bg\").attr(\'src\',"${pageContext.request.contextPath}/static/images/audioOn.png");audioOn = true; speak(" ");}return false;});});'
      footer += '</'
      footer += 'script>'
      footer += '<img id="bg" src="${pageContext.request.contextPath}/static/images/audioOff.png" height="30" width="30" style="margin-bottom:-10px; padding-bottom:-20px;">'
      new_tab_html += footer;
      console.log(new_tab_html);
      new_window.document.write(new_tab_html);
    }

我更新了函数。唯一的问题是，当我调用该方法两次时，它会呈现html两次。需要某种类型的控件来防止html被呈现两次。

该项目的github回购是here.

顺晟科技：

上一篇：HTML-为什么包装的flexbox 下一篇：JavaScript-如何限制用户将

网站建设

Html

JavaScript-使用呈现函数呈现html-堆栈溢出