Question

我正在尝试创建一种像W3schools的Tryit编辑器，但它不起作用。我做的几乎与jsfiddle完全相同，但它不起作用。

这是Javascript函数。

function update(){
            var value = document.getElementById('textinput').value;
            var change = document.getElementById('change');
            change.innerHTML = value;
        }

Here's the JSFiddle.

这里超级迷茫。有帮助吗？提前谢谢。

Answer 1

<textarea class="textinput" rows=10 cols=50></textarea>

应该是：

<textarea id="textinput" rows=10 cols=50></textarea>

如果您在JSFiddle中进行此项实验，除非您在Frameworks＆amp ;;中将 onDomready 更改为无包装 - <head> ，否则它将无效。扩展程序标签。

Answer 2

我不是内联onClick事件的粉丝，所以我把它移到了JS：

document.getElementById("button").onclick = function(){
    var value = document.getElementById('textinput').value;
    var change = document.getElementById('change');
    change.innerHTML = value;
}

Here's a working example.

修改：在我将设置更改为onClick之前，内联No wrap - in <body>对我不起作用。

您的HTML中也有一些错误，例如textarea引用id，而是给它class

Answer 3

好吧，好吧，我有一些乐趣，想知道可能出现什么问题。

你有

getElementByID()

已连接到class。

为了使它在JSFIDDLE工作中我必须放一个

window.update = update;

进入代码。

但请使用@Charlie的分离代码！：）

<强>的jsfiddle： http://jsfiddle.net/XHVL2/4/

Answer 4

我更喜欢实时编辑器，而不是点击 W3sc`````相同的按钮......

LIVE DEMO

 <body>
        <div id="content">
            <header>
                <h1 class="maintitle">TEST HTML/CSS CODE</h1>
            </header>
            <h1>Input:</h1>
            <textarea id="textinput" rows=10 cols=50></textarea>
            <h1>Output:</h1>
            <div id="result" style="border:2px solid #ccc;">(No HTML)</div>
        </div>
</body>

var doc = document;
function el(id){
    return doc.querySelector(id);
}
function applyResult(){
    el("#result").innerHTML = this.value;
}

el("#textinput").addEventListener('keyup', applyResult, false);

或提供一种更简单的方法来处理以下事件： keyup，paste，change，propertychange 等...
使用jQuery：

jQuery LIVE DEMO

var $res = $('#result'),
    $inp = $('#textinput');
$inp.on('input', function(){ $res.html( this.value ); });

Answer 5

由于您使用的是textinput，因此id应该是class，而不是getElementById：

<textarea id="textinput" rows="10" cols="50"></textarea>

能够运行它是JSFiddle，在框架和放大器中将onLoad设置为No wrap - in <body>。左上角的扩展程序面板。

从textarea值更新div

5 个答案: