“对象HTMLTextAreaElement”与表单上的输出一起出现

时间:2017-09-03 04:43:09

标签: javascript html

我正在处理一个表单,其中我添加了第二个输出字段,在第二个字段中,它具有不同的格式,我在我的代码中放置了一个示例。现在我已经部分工作了,但是出现了两个问题。

  1. 首先它首先在输出字段中返回[object HTMLTextAreaElement]响应,而不是放置我想要的输出。我无法弄清楚为什么它一直在添加[object HTMLTextAreaElement]。

  2. 其次,我第一次使用表单时,除了[object HTMLTextAreaElement]之外,它确实有效。然而,当我使用“重置”按钮时,它实际上似乎并没有“清除”第一个字段的输出,因为它似乎记住了前一次输入的任何内容,尽管被重置。我确实需要第二个输出字段来执行编码,除非在重置之前没有返回输入的信息。我希望这是有道理的。

  3. 最后,有什么方法可以让一个按钮将结果输出到两个输出框?如果我必须使用两个按钮,那么这不是世界末日,但如果我能将它们组合成一个,那就太棒了。正如我现在设置的那样,我知道我从第一个输出中获取输入的文本,而不是将其转换为第二个输出。所以也许这不是一个非常简单的修复。

  4. 此外,请不要修复JQuery,只需javascript和HTML。我希望单页上的所有代码。请有人帮忙,我已经被困在这几个小时了,我试图解决它没有任何效果。

    这是我的HTML

    <table width="100%" height="700" border=0>
    <tr>
        <td width=550 valign=top>
    
    <form name="Form1" onsubmit="return false;" action="">
               Name:
            <br>
    <input type="text" name="Name" id="name" placeholder="Name"><br>
                Number:
            <br>
    <input type="text" name="Number" id="number" placeholder="Number"><br>
                Question:
            <br>   
    <input type="text" name="Question1" id="questionOne" placeholder="Answer">
            <br>
                Question:
            <br>
    <select type="drop" name="Question2" id="questionTwo">
        <option value="Select Yes or No">...</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
    </select><br>
                Enter some text?
            <br>
    <textarea type="textarea" name="Sometext" id="someText" placeholder="Type 
    something" 
    cols="70"  rows="3"></textarea><br>
    
               Question:
            <br>
    
    <select type="drop" name="Question3" id="questionThree">
        <option value="Select Yes or No">...</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option></select>
    
    
            <br>
               Question:
               <br>
    
        <select type="drop" name="Question4" id="questionFour">
        <option value="Select Yes or No">...</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option></select>
          <br>
    
            Enter more text:<br>
    <textarea type="textarea" name="Story" id="story" placeholder="Type me a 
    story" 
    cols="70"  rows="10"></textarea>
    <br>
    
        </td>
        <td valign="top">
    
                <table border=0 height=100% ><tr><td valign="top" height=410>
    
    <textarea type="textarea" name="output" onclick="this.focus();this.select()" 
    id="output" cols="70" rows="25" placeholder="Name:
    Number:
    Answer:
    Answer:&#x0a;
    Some text:&#x0a;
    Answer:&#x0a;
    Answer:&#x0a
    A little story:"></textarea>
    <br>
    
                </td>
            </tr>
            <tr>
                <td valign=top>
    
    <div class="btn-group">
        <button value="Combine" onclick="convert()" id="combine1">
            Combine
        </button><br><br>
    </div>
    
    
    
    
            <textarea type="textarea" id="secondOutput" name="output" 
    onclick="this.focus();this.select()" cols="70" rows="15" placeholder="Three
    Lines
    Down
    Name:
    Number:
    Answer:
    Answer:
    Some text:
    Answer:
    Answer:
    A little story:"></textarea>
    
    
        <div class="btn-group">
        <button value="Combine" onclick="NoteStart()" id="combine1">
            Second copy
        </button><br><br>
    </div>
    
                </td>
            </tr>
            <tr>
                <td align="right">
    
                        <table width=25% height=100% border=0>
                            <tr>
                                <td valign="bottom">
    
    <div class="btn-group">
        <button type="reset" value="Reset form">
            Reset form
        </button> <br><br>
    </div>
    
    </form></div>
    
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
      </tr>
    </table>
    

    是的,我知道,桌子,对不起......

    脚本

    <script>
    function wordwrap(str, width, brk, cut) {
    brk = brk || '\n';
    width = width || 60;
    cut = cut || false;
    
    if (!str)
    return str;
    
    var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' : 
    '|\\S+?(\\s|$)');
    return str.match( RegExp(regex, 'g') ).join(brk);
    }
    
    
    
    function convert() {
    var name = document.getElementById("name").value;
    var number = document.getElementById("number").value;
    var questionOne = document.getElementById("questionOne").value;
    var questionTwo = document.getElementById("questionTwo").value;
    var someText = document.getElementById("someText").value;
    var questionThree = document.getElementById("questionThree").value;
    var questionFour = document.getElementById("questionFour").value;    
    var story = document.getElementById("story").value;
    
    
    var output = "";
    output += "Name: " + name + "\n";
    output += "Number: " + number + "\n";
    output += "Answer: " + questionOne + "\n";
    output += "Answer: " + questionTwo + "\n\n";
    output += "Some text: " + someText + "\n\n";
    output += "Answer: " + questionThree + "\n\n";
    output += "Answer: " + questionFour + "\n\n";
    output += "A little story: " + story + "";
    
    
    document.getElementById("output").value = output;
    }  
    
    </script>
    
    <script>
    
    function NoteStart() {
    var input = document.getElementById("output").value;
    input = input.replace(/\r/g, '').replace(/\n\n+/g, '\n');
    input = wordwrap(input, 60, '\n', true);
    
    var data = input.replace(/[ \n\t\r]+$/g, '').split(/\n+/);
    
    var StartNS = "";
    
    for (var i=0; i<data.length; i++) {
        if (i%10==0) {
            if (i>0)
                output += "\n";
    
            output += "Three\nLines\nDown\n";
        }
    
        output += data[i]+"\n";
    }
    
    output += (data.length%10>0) ? "\n\n" : "\n";
    
    document.getElementById("secondOutput").value = output;
    }
    </script>
    

    正如我所说的那样,我现在一直试图解决这个问题,但是我在这里难倒了。感谢任何帮助。在这里,我在这里制作了一个jsfiddle https://jsfiddle.net/s8qhezmx/,所以任何人都可以看到什么工作

1 个答案:

答案 0 :(得分:1)

function NoteStart()放置var output = "";

function NoteStart() {
   var output = "";

   // stuff
}

在此声明之前您引用的output变量是包含output的HTMLElement对象的<textarea id="output">全局对象,这就是您在执行[object HTMLTextAreaElement]时获取output += //stuff的原因循环中的builder.setView(dialogView); final android.support.design.widget.TextInputEditText minPrice = (android.support.design.widget.TextInputEditText) dialogView.findViewById(R.id.minPrice); final android.support.design.widget.TextInputEditText maxPrice = (android.support.design.widget.TextInputEditText) dialogView.findViewById(R.id.maxPrice); 导致了您的问题。

希望有所帮助

更新:

the reason why there are global variables that are named with an elements ID and contains the JavaScript object reference of the element