Question

我正在尝试使用cleatext清除带有ID“css”的textarea中的内容，但它不起作用，有人知道这里有什么问题吗？

<!DOCTYPE html>

    <html>
        <head>
            <meta charset="utf-8">
            <title>CSS3 Flexible Box Layout</title>
            <script type="text/javascript">

                function preview() {
                    var textArea = document.getElementById('html');
                    var div = document.getElementById('preview');
                    var text = textArea.value;
                    div.innerHTML = text;
                }

                function cleartext() {
                    var textareaObject = document.getElementById('css');

                    console.dir(textareaObject); 
                    textareaObject.innerHTML = "";
                }
            </script>
        </head>
        <body>
            <form action="#" method="POST">
                <div id="columnsWrapper">

                    <div class="middleRow">

                        <textarea id="css" name="css" placeholder="CSS..."></textarea>
                        <br>
                        <textarea id="html" name="html" placeholder="HTML..."></textarea>

                    </div>
                    <div class="middleRow2" id="preview"></div>
                    <div id="button">
                        <br>
                        <button type="button" class="button" onclick="preview()">Launch</button>
                        <button type="button" class="button" onclick="cleartext()" >Clear</button>
                        <button type="button" class="button">Toggle</button>
                    </div>
                    <div class="empty"></div>
                </div>
            </form>
        </body>
    </html>

我也尝试过使用textareaObject.value = null; 它也不起作用。

Answer 1

你试过textareaObject.value = ""吗？这应该可行。

Answer 2

使用value代替innerHTML

                function preview() {
                    var textArea = document.getElementById('html');
                    var div = document.getElementById('preview');
                    var text = textArea.value;
                    div.value = text;
                }

                function cleartext() {
                    var textareaObject = document.getElementById('css');

                    console.dir(textareaObject); 
                    textareaObject.value = "";
                }

<!DOCTYPE html>

    <html>
        <head>
            <meta charset="utf-8">
            <title>CSS3 Flexible Box Layout</title>
        </head>
        <body>
            <form action="#" method="POST">
                <div id="columnsWrapper">

                    <div class="middleRow">

                        <textarea id="css" name="css" placeholder="CSS..."></textarea>
                        <br>
                        <textarea id="html" name="html" placeholder="HTML..."></textarea>

                    </div>
                    <div class="middleRow2" id="preview"></div>
                    <div id="button">
                        <br>
                        <button type="button" class="button" onclick="preview()">Launch</button>
                        <button type="button" class="button" onclick="cleartext()" >Clear</button>
                        <button type="button" class="button">Toggle</button>
                    </div>
                    <div class="empty"></div>
                </div>
            </form>
        </body>
    </html>

Answer 3

http://plnkr.co/edit/4PWSzqItL55DqhVQV4PC?p=preview

<!DOCTYPE html>

    <html>
        <head>
            <meta charset="utf-8">
            <title>CSS3 Flexible Box Layout</title>
            <script type="text/javascript">

                function preview() {
                    var textArea = document.getElementById('html');
                    var div = document.getElementById('preview');
                    var text = textArea.value;
                    div.innerHTML = text;
                }

                function cleartext() {
                    var textareaObject = document.getElementById('css');

                    console.dir(textareaObject); 
                    textareaObject.value = "";
                }
            </script>
        </head>
        <body>
            <form action="#" method="POST">
                <div id="columnsWrapper">

                    <div class="middleRow">

                        <textarea id="css" name="css" placeholder="CSS..."></textarea>
                        <br>
                        <textarea id="html" name="html" placeholder="HTML..."></textarea>

                    </div>
                    <div class="middleRow2" id="preview"></div>
                    <div id="button">
                        <br>
                        <button type="button" class="button" onclick="preview()">Launch</button>
                        <button type="button" class="button" onclick="cleartext()" >Clear</button>
                        <button type="button" class="button">Toggle</button>
                    </div>
                    <div class="empty"></div>
                </div>
            </form>
        </body>
    </html>

cleartext Javascript函数不起作用

3 个答案: