Question

<html>
<head>
<script>

function html(el) {
    var html = el.value || '', 
    wysiwyg = document.getElementById('output_html');

    if (html == '') {
    document.getElementById('clear').disabled = true;
    html = 'HTML editor!';
    } else {
    document.getElementById('clear').disabled = false;
    }

    wysiwyg.innerHTML = html;
}
function clear() {
    var html = document.getElementById('input_html'), 
    wysiwyg = document.getElementById('output_html');

    wysiwyg.innerHTML = 'HTML editor!';
    html.innerHTML = '';
}
</script>
</head>
<body onload="javascript:document.getElementById('clear').disabled = false;">
    <div id="output_html">HTML editor!</div>
    <input id="clear" type="submit" onclick="clear()" value="Clear"/>
    <textarea id="input_html" onKeyUp="html(this)" placeholder="Type HTML!"></textarea>
</body>
</html>

我想学习JavaScript并愚弄它，但我遇到了一个问题。

当我在textarea上输入内容时，它会根据需要自动更新。

当我按下“清除”时，它应该清除，但它不会。为什么要这样做？

Answer 1

最短的答案是不要使用内联处理程序。它们与文档范围一起运行，因此它会尝试运行document.clear()，然后再向上一级并找到全局window.clear()，这是您的功能。

window.onload = function() {

    document.getElementById("input_html").onkeyup = function () {
        var html = this.value || '', 
        wysiwyg = document.getElementById('output_html');

        if (html == '') {
            document.getElementById('clear').disabled = true;
            html = 'HTML editor!';
        } else {
            document.getElementById('clear').disabled = false;
        }
        wysiwyg.innerHTML = html;
    }

    document.getElementById("clear").onclick = function () {
        var html = document.getElementById('input_html'), 
            wysiwyg = document.getElementById('output_html');
        wysiwyg.innerHTML = 'HTML editor!';
        html.value = '';
    }
}

HTML：

<body>
    <div id="output_html">HTML editor!</div>
    <input id="clear" type="submit" value="Clear"/>
    <textarea id="input_html" placeholder="Type HTML!"></textarea>
</body>

Answer 2

长话短说，你想设置textarea的值，而不是它的innerHTML。

textarea和; div不会清除onclick

2 个答案: