Develop Reference

hooking up button in JS without using the onclick event

<button id=trainingbutton document.getElementById("trainingbutton").addEventListener("click",
}); ></button>
function(){
trainingbuttonclicked=()=>document.getElementById("trainingbtn").innerHTML = "Hello World";
Completely new to JavaScript and am trying to hook up a button to show an alert. Above is my HTML first and my app.js is below. I would like to try to hook up the event without using a simple onclick event handler. My preferred method would be either the event handler or the inner HTML method. Any advice appreciated. I know it's something simple but maybe Ive been staring at it too long, because I can't see the answer

You need your script tag in order to insert an eventlistener, like so
<script>
const button = document.querySelector('#trainingButton"); // # id's and . for selecting a
class in the dom (document object model)
button.addEventListener('click', function(event) {
const string = 'some string';
alert(string);
});
</script>
Your Button id should only contain a string like trainingButton so that it becomes <button id="trainingButton">
> the script tag should be placed in the bottom of your body tag, in order for the DOM to load properly before any javascript runs
for more info
https://www.w3schools.com/jsref/met_element_addeventlistener.asp

You need to separate your HTML from your javascript. You can either have them in separate files or in the same.
If you'd like them in the same file you can do the following. (Note: the script has to be after the button because we want it to run after the button has been created)
<button id="trainingbutton">Training Button</button>
<script>
var trainingbutton = document.getElementById("trainingbutton");
trainingbutton.addEventListener('click', function(event) {
trainingbutton.innerHTML = "Hello World";
});
</script>
You can also define the script above between the script tags in a seperate file (*.js) and link it to your HTML file using <script src='*.js'></script>. As you add more to your HTML and JS it can help to organize.

"onchange" function never called when I load file in form

I am building a form using the bootstrap CSS in my Symfony project.
The problem is that when I set up a "File Input" field and when I actually load a file, the name of the file doesn't appear in this input.
So I tried to use this code :
$('.custom-file-input').on('change', function(event) {
var inputFile = event.currentTarget;
$(inputFile).parent()
.find('.custom-file-label')
.html(inputFile.files[0].name);
});
But the event "on change' is never called ( I tried to put an alert).
But it seems to work here. I don't understand where is the problem ...

I found the solution ! Just add :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Finally, the solution wasn't to add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
But it was just to move the javascript includes in the block instead of the end of the !

Javascript - load template in html of element

I have a template that I want to render inside html element on click of element. I want to do something like ( I am using jquery):
$(".btn")on("click", function(){
$("#element").html(partial_template.html)
});
Buto this of course wont work. How can I achieve this?
EDIT: I am using Django, if this matters!

Use .load() function , make sur to set the right path to your html tpl .
$(".btn").on("click", function(){
$("#element").load("path_to_your_html_folder/partial_template.html");
});

Is this right way to call php file using jquery?

I am trying to call the php file onclick of button ,
i tried using ajax but many of them said not to use for downloading the file.
here is my code.
jQuery(document).ready(function($){
console.log("plugin script loaded3");
$('#csv').click(function()
{
alert("csv");
document.location.href = "/wp-content/plugins/est_collaboration/php/export_csv.php";
});
});
Even tried using $get but its not getting downloaded.
when i click the button it has to call php file which download csv format.

You can simply try this
Download

Change your jquery startup to simply:
$(function() {
$('#csv').click(function() {
alert("csv");
});
});
Alternatively, to download a "file", you can add it as the href to an anchor link, eg:
<a id='downloadlink' href='/wp-content/plugins/est_collaboration/php/export_csv.p‌​hp'>csv</a>
if you need to add parameters, you can change the href via jquery, eg:
$("#downloadlink")
.prop("href", "/wp-content/plugins/est_collaboration/php/export_csv.p‌​hp?param1=" + param1value);
Alternatively (again), it could be that you are adding the "#csv" button dynamically, after jquery startup has run, in which case you need event delegation. See this question for more info: Event binding on dynamically created elements?

Javascript replace content innerhtml on click with integrated PHP tag

I am trying to replace the content of a DIV once the button inside that DIV is clicked, (basically replacing the button, which retreives a PHP variable:
<div id="buttonholder">
Publish
</div>
I am trying to replace it with an unpublish button after a post is published (when the button above is clicked):
function publish(status){
document.getElementById("buttonholder").innerHTML = 'Unpublish';
}
It does not work however ... What am I doing wrong ?

Your code syntax is wrong. Use like below.
function publish(status){
document.getElementById("buttonholder").innerHTML = 'Unpublish';
}

Add a button id and then do:
$(function() {
$("#buttonId").click(function() {
$("#buttonHolder").html(" html to replace with ");
});
});
Also you can use the $("#buttonHolder").html(" html to replace with "); instruction in your onClick function as well.