Develop Reference

GWT: extract textarea value using plain javascript

Context: I'm working on a tampermonkey script to enrich some GWT pages witnin a 3rd party app, no access to sourcecode nor to servers
Problem: I need to extract the value of a textarea element using plain JavaScript (see above as to why)
HTML as I see now: inside a series of table>tr>td>div>div>div
<textarea class="gwt-TextArea" style="height: 400px; width: 600px;" id="MyTarget"></textarea>
issue:
the html of the textarea does NOT contain any text, what I see must be something else
as expected document.getElementById("MyTarget").value==""

Value is the property you want and should work without any problems.
Here is a quick example showing how to use it.
document.getElementById('MyTarget').addEventListener("keyup", function() {
let value = document.getElementById('MyTarget').value;
document.getElementById('MyOutput').innerHTML = value;
})
<textarea class="gwt-TextArea" style="height: 100px; width: 200px;" id="MyTarget" onkeyup="window.keyup"></textarea>
<div id="MyOutput">
</div>

add plugin in ng-ckeditor

I'm using ng-ckeditor to work on ckeditor with angularJS. I have to add code snippet plugin in ckeditor. As per words of ng-ckeditor, I have passed plugin data into editorOptions. But still it is not getting loaded into ckeditor. I can't get that waht is issue. ng-ckeditor accepts uiColor value from editorOptions. But it doesn't work for plugin data. If anyone can help, it will be appreciated.
Here is my code
HTML
<textarea id="taDescription" name="taDescription" placeholder="Enter Description" rows="10" cols="80" ng-model="topic.description" ckeditor="editorOptions" required></textarea>
JS
$scope.editorOptions = {
extraPlugins: 'codesnippet',
uiColor: '#000000'
};
Note: I have included all the files related to ckeditor. So I'm sure that there is not any problem related to missing file etc.

I think this angular directive does not support the functionality of adding extra plugins. I also faced the same problem when adding code snippet plugin to CKEditor in angular js and ended by implementing in following way:
Add following script on your main page:
<script src="http://cdn.ckeditor.com/4.7.1/standard-all/ckeditor.js"></script>
Also, define config for CKEditor of code snippet plugin in following way:
<script>
var config = {
extraPlugins: 'codesnippet',
codeSnippet_theme: 'monokai_sublime',
autoUpdateElement : true,
height: '30%'
};</script>
You can also define this config in your page or in your main page(if yu need to add it to multiple pages).
Then go to your page and use CKEditor as following:
<textarea ng-model="yourmodel" placeholder="Enter Description" id="description" name="description"></textarea>
At the end of the page you need to use following script:
<script>var editor = CKEDITOR.replace( 'description' , config);</script>
This script should be only added after your element otherwise it will give you the error of undefined element.
Hope this will help someone.

Changing input value with javascript - what went wrong?

I have a text with an input field. I want the field to start as blank, and when clicked upon, set the input's text to its correct value (saved in the "name" field, for instance).
If I do it this way, it works fine:
Buy <input type="text" name="eggs" onclick="this.value=this.name;"> tomorrow.
However, if I try to clean the DOM and move the function to a separate javascript file, it stops working:
HTML:
Buy <input type="text" name="eggs" onclick="showname(this);"> tomorrow.
JS:
function showname(el) {
el.value = el.name;
}
function showname(el){
el.value = el.name;
}
.closeform{
width: 70px;
}
.closeform input {
width: 70px;
}
.closeform button {
width: 70px;
}
Buy
<span class="closeform">
<input type="text" name="eggs" onclick="showname(this);">
</span>
tomorrow.
I'm very new to Javascript - what am I missing here?

You say in your question:
However, if I try to clean the DOM and move the function to a separate javascript file, it stops working
Let's say you have 2 actual files in the same folder:
myscript.js contents:
function showname(el) { el.value = el.name; }
index.html contents:
<!DOCTYPE html>
<html><head><title>Demo</title>
<script src="myscript.js"></script>
</head><body>
Buy <input type="text" name="eggs" onclick="showname(this);"> tomorrow.
</body></html>
OR
<!DOCTYPE html>
<html><head><title>Demo</title>
</head><body>
Buy <input type="text" name="eggs" onclick="showname(this);"> tomorrow.
<script src="myscript.js"></script>
</body></html>
That should work perfectly...
However, in the comments you say:
I tried it with Fiddle - maybe the problem is in Fiddle interface.
That is where your problem was....
There is no separate javascript-file in jsfiddle.
The three code-blocks (html, js, css) get merged into one file.
Right-click the result-window in jsfiddle and look at the generated file.
Then notice the options (top right corner) from jsfiddle: by default the code is wrapped in an onload-method (suiting to the library you selected or window.onload if you are not using a library).
You can however place the script in the head or body, thereby not wrapping your code inside a function's scope (which then closes over the containing identifiers).
See http://jsfiddle.net/wf55a5qb/ for a working example.
The reason your example stack-snippet worked here on StackOverflow is that it's snippet-editor does not wrap the javascript codeblock in a (onload-like) function (when it combines the three code-blocks).
Having said and explained this, I do encourage you to set your events (Using obj.addEventListener/obj.attachEvent or the direct elm.onevent) from the/a script once the elements (that your script manipulates, place script as last element of the html-body) or page (using window.onload/etc) has loaded.
I posted this to clear up what actually went wrong so you don't make false models in your head about how javascript works (like "an external script runs in it's own scope" which no-one claimed but might be an assumption you might make) whilst still learning it!

Everything in JavaScript has a scope. Where you are defining your function, it is not visible to the input so the input doesn't know that function even exists. You can use window to make the function visible to it:
<input type="text" name="eggs" onclick="window.showname(this);"/>
window.showname = function (el)
Fiddle
I don't recommend global functions though. So then what else?
You can use the onclick function in JavaScript. To find elements in JavaScript, you use selectors. I'm using getElementById() this will get an element by it's id. A list of selectors are here
<input id="my_input" type="text" name="eggs"/>
Then in JavaScript:
document.getElementById('my_input').onclick = function () {
//Use this to refer to the element
this.value = this.name;
};
Fiddle
When doing this. Make sure all your code is wrapped in a window.onload. This will make sure the code is run at the right time:
window.onload = function () {
//Your code
};
JSFiddle automatically puts your code in this.

Unable to change color of keywords within a text area

I am attempting to write a program that can detect if you inserted a JavaScript keyword, and if you have, it will change the color of it so it will stand out(It will eventually submit the code and I will use it for offline debugging on a chromebook). However, it seems that I cannot change the color of the text within the textfield when it matches a keyword. jsFiddle Example
Here is the code:
CSS:
#JScodeinputbox{font-family:Arial;}
#JScodeoutputbox{}
.JSfunctions{color:blue;}
HTML:
<body>
<textarea id="JScodeinputbox" wrap="logical" rows="30" cols="70" onkeyup="checkHighlight();"></textarea>
<canvas>
</canvas>
</body>
</html>
JavaScript:
var codeInput = document.getElementsByTagName("textarea");
var keywords = new Array("var", "if");
function checkHighlight(){
var codeInput1 = codeInput[0].value;
if(codeInput1 === keywords[0]){
keywords[0].indexOf(codeInput1).className = "JSfunctions";
}
}
If anyone know how to resolve this issue or simpler alternatives(preferrably not involving JQuery, PHP, etc.) it would be much appreciated.
PS: I know it is not about it being onkeyup, I have that for a reason. It also works when I run other methods, so I don't think it's formatting, either(but it could be).

You can use JQuery Highlight Textarea plugin with this code (sample from site)
<textarea cols="50" rows="5">...</textarea>
<script>
$('textarea').highlightTextarea({
words: ['Lorem ipsum', 'vulputate']
});
</script>
and problem solved

document.ready() function not working

I am working for selecting the text from a text box to the clipboard with the help of zclip. But the document.ready() is not working. It is not even showing the alert.
All required libraries are above the script tag and inside the head section. All the files are at the required positions.
I have even checked the files along with the full URL.
<script type="text/javascript" language="javascript">
$(document).ready(function(){
alert('hi');
$("a#copy_initiator").zclip({
alert('hi');
path:"js/ZeroClipboard.swf",
copy:function(){return $("input#copy-box").val();}
});
});
</script>
<a id="copy_initiator">Copy Link:</a> <input id="copy-box" type="text" value="here_is_a_url" onfocus="this.select();">

you have a syntax problem here:
$("a#copy_initiator").zclip({
alert('hi');
path:"js/ZeroClipboard.swf",
copy:function(){return $("input#copy-box").val();}
});
should be:
$("a#copy_initiator").zclip({
path:"js/ZeroClipboard.swf",
copy:function(){
return $("input#copy-box").val();
}
});
And better version:
$("#copy_initiator").zclip({
path:"js/ZeroClipboard.swf",
copy:function(){
return $("#copy-box").val();
}
});
Suggestion: use firebug to track these kind of issues.

you say "All required libraries", are you including several libraries ?
If this is the case, it could be possible that they are creating a conflict with jquery "$".
here is a webpage explaining this : https://api.jquery.com/jQuery.noConflict/
a test you can do, is going to your console entry in your browser's debugguer and try typing $('div'), or $('p'). If any of the html tags you select are recognize it means the $ is working, otherwise not.