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 can I make HTML code non-execute?

What I want to do is allow the user to input a string then display that string in the web page inside a div element, but I don't want the user to be able to add a bold tag or anything that would actually make the HTML text bold. How could I make it so the text entered by the user does not get converted into HTML code, if the text has an HTML tag in it?

Use createTextNode(value) and append it to your element(Standard solution) or innerText(Non standard solution) instead of innerHTML.
For a JQuery solution look at Dan Weber's answer.

here's a neat little function to sanitize untrusted text:
function sanitize(ht){ // tested in ff, ch, ie9+
return new Option(ht).innerHTML;
}
example input/output:
sanitize(" Hello <img src=data:image/png, onmouseover=alert(666) onerror=alert(666)> World");
// == " Hello <img src=data:image/png, onmouseover=alert(666) onerror=alert(666)> World"
It will achieve the same results as setting elm.textContent=str;, but as a function, you can use it easier inline, like to run markdown after you sanitize() so that you can pretty-format input (eg. linking URLs) without running arbitrary HTML from the user.

use .text() when setting the text in the div rather than .HTML. This will render it as text instead of html.
$(document).ready(function() {
// Handler for .ready() called.
$("#change-it").click(function() {
var userLink = $('#usr-input').val().replace(/.*?:\/\//g, "");
$('#users-text').text(userLink);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="form-control" id="usr-input">
<br>
<button id="change-it" type="button">Update Text</button>
<br>
<div id="users-text"></div>

Why not simply use .text() ?
$('#in').on('keyup', function(e) {
$('#out').text($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="in">
<br>
<div id="out"></div>

How to trigger jquery input file?

I am trying to trigger input tag to select a file by a button click though jquery. code example like the following
<input type="file" id="input_file"/>
<button onclick="select_file()"/>
function select_file() {
${'input_file').select("http://www.someimage.com/image.gif");
}
After hours of research, I still have not got the solution how I could make this happen.
Appreciate for any suggestion or solution
Thanks you

I was going to suggest:
$("#input-file").trigger("click");
but then I remembered there are security restrictions which prevent triggering and setting the values of file input dialogs.
There are some ways around it though, take a look at this question: https://stackoverflow.com/a/3030174/992435

You have typos in your codes... correct as follows;
<input type="file" id="input_file"/>
<button onclick="select_file()"/>
function select_file() {
$('#input_file').val("http://www.someimage.com/image.gif");
}
Use Val in place of Select
You missed a # sign in the function
You missed a quote in the file input tag
You used a curly brace instead of a bracket

There were a couple of things wrong with your snippet. You were not using script tags, you had forgotten the '#' before ID selectors and you had a curly bracket after the dollar sign.
<input type="file" id="input_file/>
<button onclick="select_file()"/>
<script>
function select_file() {
$('#input_file').select("http://www.someimage.com/image.gif");
}
</script>
Although the way you are approaching your problem technically works, I would never recommend it since it can lead to unmaintainable code. A better approach would be something like:
<input type="file" id="input_file/>
<button class="changeInputButton" />
<script>
$('.changeInputButton').on('click', function () {
$('#input_file').val("http://www.someimage.com/image.gif");
});
</script>

You should use
<input type="hidden" id="input_file"/>
<button onclick="select_file()"/>
function select_file() {
$('input_file').val("http://www.someimage.com/image.gif");
}
The input type of file is used mainly for local file system files.
EDIT: Sorry about the typos

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");
}

How can I use CSS to show and hide multiple elements at once?

I found this article that looked like exactly what I wanted, but I can't seem to get it to work at all. Since it is well over a year old, I thought perhaps something may have changed, or that there might be a simpler way to do it by now.
That is to say, I cannot get the method I linked above to work. I copied and pasted exactly, and used <body onLoad="javascript_needed()"> because I wasn't sure where $(document).ready(function ()... was supposed to go. I am, sadly, quite unfamiliar with Javascript.

Use something like this;
<script>
$(document).ready(function(){
//Code goes in here.
});
</script>
Don't forget to load the jQuery library at the same time from http://jquery.com/
Also, you are going to want to read up on selectors.
Using $("#myElement") will select elements that have an id of "myElement".
Using $(".myElement") will select elements that have a class of "myElement".
So;
<div class="hideMe">Content</div>
<div class="hideMe">Content</div>
<div class="hideMe">Content</div>
<div class="doNotHideMe">Content</div>
<input type="button" class="ClickMe" value="click me"/>
<script>
$(function(){
$(".ClickMe").click(function(){
$(".hideMe").hide(250);
});
});
</script>
edit
If you want to link to the jquery library online then use;
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
If you download the library and insert the js file into your project then use;
<script src="/yourPathToTheLibrary/jquery-1.6.1.min.js" type="text/javascript"></script>

The $ syntax is all part of jQuery. If you wish to use jQuery then somewhere in your code, use a script tag as in your post:
<script>
$(function() {
$('.selector').hide(250);
});
</script>
If you want pure JavaScript, then there is a little more overhead. Not including the document ready stuff (which can be a lot of extra code to do it right...See example: here).
<script>
elements = document.querySelectorAll('.selector');
for(int i=0,len=elements.length;i<len;++i) {
elements[i].style.display = 'none';
}
</script>
You can put that in a function if you would like. To show the elements set the display attribute to ''.