Develop Reference

Trying to change value of Textarea (using Skulpt)

Okay, so I'm using Skulpt to program Python on a webpage.
I would like the text in the interpreter change once a button is clicked.
But no matter how I try, the code in the text area doesn't change.
However, if I 'alert' the value of the text area, it brings up the changed version, indicating that the button works.
I've also found this question:
Set value of textarea in jQuery
but nothing in here helped in my case :(
Here is how I try it:
<textarea id="theTextArea">print 'Hello World!'</textarea>
<div id="controls">
<button type="button" onclick="replaceCode()">Replace</button>
<button type="button" onclick="testAlert()">Alert Me</button>
</div>
<script>
function replaceCode(){
document.getElementById('theTextArea').value = "print 'Thats new code'";
};
function testAlert(){
alert(document.getElementById('theTextArea').value);
};
</script>
Also I've tried changing .innerHTML, .text and nothing actually replaced the text in the textarea.
If anyone thinks it could help, I could add the full HTML document with the whole Skulpt setup for online python interpreter, in case it somehow doesn't let me change the value of the textarea in a regular way. But I prefer not to have a wall of code for now if it's not needed for now.

You forgot brackets in your onclicks. You should use HTMLTextAreaElement.innerHTML to change the textarea's content
function replaceCode(){
document.getElementById('theTextArea').innerHTML = "print 'Thats new code'";
};
function testAlert(){
alert(document.getElementById('theTextArea').innerHTML);
};
<textarea id="theTextArea">print 'Hello World!'</textarea>
<div id="controls">
<button type="button" onclick="replaceCode()">Replace</button>
<button type="button" onclick="testAlert()">Alert Me</button>
</div>

So it turns out Skulpt was getting in my way of modifying python code on a button click. I needed to use a function which was defined probably in one of the imported documents which come with Skulpt. The function looks like this:
editor.setValue("print 'Thats new code'");
And then it actually changes in the textarea :)

how to change Jscolor to remove hex

Hey if anybody knows http://jscolor.com/ I'm trying to have it in html without showing the hex code. I can't find where to hide the text in the long js file, any tips would be appreciated.

Use {valueElement:null}. Example:
<button
class="jscolor {valueElement:null,value:'66ccff'}">
</button>
More info:
http://jscolor.com/examples/#example-custom-look

Using thymeleaf variable in onclick attribute

In my current spring-boot project, I have one view with this html code:
<button type="button" class="btn btn-primary" onclick="upload()" th:utext="#{modal.save}"></button>
in the onclick attribute, the call for the function upload() should have one parameter, which value is stored in the thymeleaf variable ${gallery}.
Anyone can tell mehow to use the expression in the above command?
I already try this:
th:onclick="upload(${gallery)"
th:attr="onclick=upload(${gallery)"
None of this worked.

thymeleaf 3.0.10 th:onclick
thymeleaf variable not working
This should work:
th:attr="onclick=|upload('${gallery}')|"

I solve this issue with this approach:
th:onclick="|upload('${command['class'].simpleName}', '${gallery}')|"

This should work:
<button th:onclick="'javascript:upload(' + ${gallery} + ')'"></button>

In 3.0.10 version of Thymeleaf
use [[ ]] it's more easier , thymeleaf goes to inject the value in template
if the value is string no quote need
<button th:data-id="${quartzInfo.id}"
th:onclick="del(this,[[${quartzInfo.id}]]" type="button">
</button>

The older replies does not work in the new version of 3.0.10. Now you need:
<button th:data-id="${quartzInfo.id}"
onclick="del(this,this.getAttribute('data-id'))" type="button">
</button>

In fact this one is working too :
th:attr="onclick=${'upload('+gallery+')'}"

yes it's to late, but i hope this will help people who need it
try this
th:onclick="'upload('+${gallery}+')'"

If you are going to use attr, where there is a string the HTML will crash and you have to do the following, in case of string values.
th:attr="onclick=${'toggleContractLine('+ ''' + contract.id + ''' + ')'}"

Javascript quote escape giving bugs

I need to print a button to a div that would pass a variable MyVar(string), or, to be precise, it's value, as a parameter to a function addfr(). The code:
document.getElementById("somediv").innerHTML="<button onclick=\"addfr(\""+MyVar+"\")\">Add as friend</button>";
Instead of the expected
<button onclick="addfr("MyVar")">Add as friend</button>"
I get:
<button onclick="addfr(" MyVar")"="">
What is happening here? Any ideas how to fix this?
Edit: The final solution is, for those interested:
<button onclick=\"addfr(""+MyVar+"")\">Add as friend</button>

It needs to be HTML escaped. Try using " in place of \".

You can use single quotes instead:
document.getElementById("somediv").innerHTML="<button onclick=\"addfr('"+MyVar+"')\">Add as friend</button>";

How to use function declaration with jsfiddle

I have some html/javascript that works in my .cshtml file.
When I try to move it in to jsfiddle to experiment with, it does not work.
Not sure if if it's my lack of javascript experience, jsfiddle experience, probably both....
html:
<div>
<button name="startBtn" id="startBtn" onclick="startTimer">Start</button>
</div>
(I have also tried "startTimer()" for the onclick attribute; same result.)
javascript:
function startTimer() { alert("startTimer"); }
When I click the button, I see this in the Console:
Uncaught ReferenceError: startTimer is not defined
What am I overlooking?
(jsfiddle: http://bit.ly/1buQx9t)

jsFiddle Demo
First you have to set the Framework to No wrap - in <head>, instead of onLoad.
Description
onLoad is the same as window.onload=function(){[YOU ARE TYPING HERE]} in JavaScript or $(function(){[YOU ARE TYPING HERE]}); in jQuery.
No wrap - in <head> is the same as <head><script type="text/javascript">[YOU ARE TYPING HERE]</script</head>
No wrap - in <body> is the same as <body>[HTML CODE HERE]<script type="text/javascript">[YOU ARE TYPING HERE]</script></head>
I hope this clears up the settings in jsFiddle, they can be somewhat confusing.
Second your HTML is slightly wrong:
HTML
<div>
<input type="button' value='"Start" onclick="startTimer()"/>
</div>
Description
onclick="startTimer" was changed to onclick="startTimer()" this will execute the function.

First issue: You have the jsfiddle to set on onload so the function is not in global scope.
Second issue, you are not calling the function. You are missing ()
onclick="startTimer()"

You have some weird quotes going on there (in your fiddle) plus you forgot the () after the name of the function. Use:
<input type="button" value=" Start " onclick="startTimer()" />
jsFiddle example

If you're using pure JavaScript in jsfiddle (ie - no jquery, etc), then change the second dropdown to "No wrap - in <head>"

You had some extra misplaced quotes and were not calling the function. Needed to add the () to call it. Finally you needed to change the "onload" to "no wrap - in "
<div>
<input type="button" value="Start" onclick="startTimer()"/>
</div>

The answers above are all right; I just wanted to clarify what/where to change with this picture to solve the issue:
Here is the jsfiddle demo
<button onclick="doThat()">
Click
</button>
function doThat() {
console.log("click happened");
}