JS: pass variable onclick
Solution 1
try the template format for onclick value:
onclick="deleteImage('{%=filename%}');"
try file.name as well
onclick="deleteImage('{%=file.name%}');"
Solution 2
<button id="deleteOnClick" class="btn btn-danger delete">...</button>
and in javascript:
document.getElementById("deleteOnClick").onclick = function(){deleteImage(filename);}
edit:
if you want to delete the file specified only by the original filename value:
var deleteByFile = (function (filename){
return function(){deleteImage(filename);};
}(filename));
document.getElementById("deleteOnClick").onclick = deleteByFile
Solution 3
You can't access JS variables from your HTML. You must do something like this:
var filename = 'testing';
document.getElementById('testdiv')
.setAttribute('onclick', "alert('" + filename + "')");
filename = 'more testing';
Maarten Hartman
Updated on November 03, 2020Comments
-
Maarten Hartman over 3 years
I'm trying to pass a variable to a function, I know there are many topics about this, and I've nearly tried all suggestions, but still can't get it to work, these are my attempts:
edit: without the onclick, everything is working fine
var filename = file.name; <button class="btn btn-danger delete" onclick="deleteImage(\''+filename+'\');">
results in: Uncaught SyntaxError: Unexpected token ILLEGAL
<button class="btn btn-danger delete" onclick="deleteImage("'+type+'");">
results in (alert): 'filename'
<button class="btn btn-danger delete" onclick="deleteImage('" + filename + "');">
results in: Uncaught SyntaxError: Unexpected token ILLEGAL
<button class="btn btn-danger delete" onclick="deleteImage(" + filename + ");">
result in: Uncaught SyntaxError: Unexpected token }
this is the full code (modified, blueimp fileuploader)
<script id="template-download" type="text/x-tmpl"> {% for (var i=0, file; file=o.files[i]; i++) { %} <tr class="template-download fade"> {% if (file.error) { %} <td></td> <td class="name"><span>{%=file.name%}</span></td> <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td> <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td> {% } else { // add the image urls to the file inputbox var filename = file.name; var prev = $("#mFile").val(); $("#mFile").val(prev + file.name + ","); %} <td class="preview">{% if (file.thumbnail_url) { %} <a href="modules/mod_stern_form_prijsopgave/upload/server/php/files/{%=file.name%}" title="{%=file.name%}" data-gallery="gallery" download="{%=file.name%}"><img src="modules/mod_stern_form_prijsopgave/upload/server/php/files/thumbnail/{%=file.name%}"></a> {% } %}</td> <td class="name"> <a href="modules/mod_stern_form_prijsopgave/upload/server/php/files/{%=file.name%}" title="{%=file.name%}" data-gallery="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a> </td> <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td> <td colspan="2"></td> {% } %} <td> <button class="btn btn-danger delete" onclick="deleteImage('" + filename + "');" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"{% if (file.delete_with_credentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}> <i class="icon-trash icon-white"></i> <span>Verwijderen</span> </button> </td> </tr> {% } %} </script>
and testing like this:
function deleteImage(filename) { alert(filename); }
what am I doing wrong? Thanks for your advice