Updating div from textarea value
Question
I'm trying to create a thing kind of like the Tryit Editor of W3schools, but it's not working. I've done pretty much the exact same thing as a jsfiddle, but it doesn't work.
Here's the Javascript function.
function update(){
var value = document.getElementById('textinput').value;
var change = document.getElementById('change');
change.innerHTML = value;
}
Super confused here. Any help? Thanks in advance.
5 answers
solution1
2 ACCPTED 2014-02-04 00:38:12
<textarea class="textinput" rows=10 cols=50></textarea>
should be:
<textarea id="textinput" rows=10 cols=50></textarea>
If your experimenting with this in JSFiddle, it won't work unless you change onDomready to No wrap - in <head> in Frameworks & Extensions tab.
solution2
1 2014-02-04 00:42:43
I'm not a fan of the inline onClick event, so I moved it to the JS:
document.getElementById("button").onclick = function(){
var value = document.getElementById('textinput').value;
var change = document.getElementById('change');
change.innerHTML = value;
}
Edit: Turns out the inline onClick just wasn't working for me until I changed the setting to No wrap - in <body> .
Your HTML also had some errors in it, such as referencing the textarea by its id , but instead you gave it a class
solution3
0 2014-02-04 00:44:24
Well, ok, I had some fun, wondered what could go wrong.
You had
getElementByID()
connected to a class .
And in order to make it in JSFIDDLE work I had to put an
window.update = update;
into the code.
But go with @Charlie's code of separating that!! :)
JSFIDDLE: http://jsfiddle.net/XHVL2/4/
solution4
0 2014-02-04 00:49:01
I like more a live editor than having to click W3sc````s-alike buttons...
<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);
or to provide a much simpler way to handle events like: keyup, paste, change, propertychange etc...
using jQuery:
var $res = $('#result'),
$inp = $('#textinput');
$inp.on('input', function(){ $res.html( this.value ); });
solution5
0 2014-02-04 00:54:08
Your textinput should be an id , not a class since you are using the getElementById :
<textarea id="textinput" rows="10" cols="50"></textarea>
And to be able to run it is JSFiddle, set onLoad to No wrap - in <body> in the Frameworks & Extensions panel on the upper left.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.