Question

我遇到以下代码的问题。

如果单击button，我试图更改变量的内容，然后输出相应的内容作为更大输出的一部分。输出的变化取决于是否单击了button中的内部form。

有人可以建议修复此代码或改进吗？

在输出中我应该看到一个更长的版本，因为额外的块将附加到新创建的块上并获取生成的新id值。任何帮助都会很棒。

这是我的代码：

<script>
    $(document).ready(function() {
        var currentID = 1;
        $(':button#add').on('click',function() {
            currentID++;
            var clone = $('#content').clone();
            clone.children('.content_title').attr('id', 'title_content-' + currentID);
            clone.children('.content_more').attr('id', 'more_content-' + currentID);
            clone.attr("id", "content_1");
            clone.insertAfter('#content');

            if(currentID >= 2) {
                document.getElementById("add").style.display = "none";
            }
        });
    });
</script>
</head>
<body>
    <div>
        <div>
            <form action="" method="post">
                <h1>Create Code</h1>
                <fieldset>
                    <legend><span class="number"></span>Header</legend>
                    <label for="name">Title:</label>
                    <input type = "text" id = "title" />                                                   
                </fieldset>
                <fieldset id = "content">
                    <legend><span class="number"></span>Content</legend>
                    <label for="name">Title:</label>
                    <input class = "content_title" type = "text" id = "title_content" />
                    <label for="mail">Content:</label>
                    <input class = "content_more" type = "text" id = "more_content" />
                </fieldset>
                <input id = "add" type = "button" value = "Add" />                                                                                                                                                         </form>
                <button onClick="tryTest()">Code</button>
        </div>
        <div style = "float:left; width:48%; padding-left:10px;">
            <p id="new_block"></p>
        </div>
    </div>
    <script>
        function tryTest() {
            var quote = '"';
            var start = "<pre>&lt;div class=" + quote + "newest" + quote + "&gt;</pre>";
            var title = "title=" + quote + document.getElementById("title").value + quote;
            var end = "<pre>&lt;/div&gt;</pre>";

            var start_1 = "{{widget type=" + quote + "new_version" + quote;
            var title_1 = "title=" + quote + document.getElementById("title_content").value + quote;
            var content_1 = "content=" + quote + document.getElementById("more_content").value + quote;
            var end_1 = "template=" + quote + "other" + quote + "}}";

            var title_2 = "title=" + quote + document.getElementById("title_content-2").value + quote;
            var content_2 = "content=" + quote + document.getElementById("more_content-2").value + quote;

            var widget = start_1 + "<br />" + title_1 + "<br />" + content_1 + "<br />" + end_1; 

            var widget_1 = start_1 + "<br />" + title_1 + "<br />" + content_1 + "<br />" + end_1 + start_1 + "<br />" + title_2 + "<br />" + content_2 + "<br />" + end_1; 

            if(add.clicked == false) {
                document.getElementById("new_block").innerHTML = start + "<br />" + title + "<br />" + end + "<br /><br />" widget + "<br /><br />";
            } else {
                document.getElementById("new_block").innerHTML = start + "<br />" + title + "<br />" + end + "<br /><br />" widget_1 + "<br /><br />"";
            }
    </script>

Answer 1

这段代码是jQuery和vanilla JavaScript语法的奇怪组合...... 但如果没有解析错误，它会起作用。

顺便说一句，在CodePen这样的代码编辑器中很容易找到这些错误。

  if(add.clicked == false) {
    document.getElementById("new_block").innerHTML = start + "<br />" + title + "<br />" + end + "<br /><br />" + widget + "<br /><br />";
    // Added a missing + sign --->                --->                --->                --->               here -------^
  } else {
    document.getElementById("new_block").innerHTML = start + "<br />" + title + "<br />" + end + "<br /><br />" + widget_1 + "<br /><br />";
    // Added a missing + sign --->                --->                --->                --->                 here -------^
  }

}  // Added this curly bracket to close the tryTest() function.

在此代码块的上方，是选择要附加到new_block的字符串的条件。

if(add.clicked == false) {条件始终计算为false，因为未定义add。所以未定义的属性.clicked，显然也是未定义的...
然后"undefined" == false为假...并使else块始终执行。

如果未单击“添加”，则修复此条件将避免“代码”点击时出现Cannot read property 'value' of null错误。

有几种方法可以确定是否点击了“添加”按钮。

检查元素title_content-2是否存在
在“添加”单击
点击

我会让你考虑你喜欢的解决方案并尝试一下。

以下是CodePen中提及的语法错误的代码。

发布附加新更改的变量并使用Javascript

1 个答案: