Develop Reference

Why doesn't my JavaScript statement change the background image properly?

I am trying to set a background Image of a div with this code .But it is not working. If i use backgroundColor instead then it works fine .
Can anyone tell me whats wrong with this .
Sorry for noob question.
<button onclick="document.getElementById('ab').style.backgroundImage='url("pexel.jpg")'">Click me</button>

Syntax error, see below
<button onclick="document.getElementById('ab').style.backgroundImage='url(pexel.jpg)'">Click me</button>
Use 'url(pexel.jpg)' instead of 'url("pexel.jpg")'

The quotes in the url() assignment are what's causing the issue.
You need to escape them correctly.
<button onclick="document.getElementById('ab').style.backgroundImage='url(\'pexel.jpg\')';">Click me</button>

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 + ''' + ')'}"

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

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