I am new to web developments and learning JavaScript. In my webpage,I want to create two different buttons. And by only clicking them ,it will lead to execute the javascript codes which are stored in different files. Two seperate buttons will execute two different javascript codes. How to do that?
I have a code in mywebpage.html and it works fine -
But when I change this to
It does not work anymore. What is the issue?
It's actually the same as with one file. You simply add another one.
Let's say you have two files, file1.js and file2.js.
In file1.js, there's the function function one() {...}.
In file2.js, there's the function, as you can imagine, function two() {...}.
In your .html file, you can include those two files like this:
<script src="file1.js"></script>
<script src="file2.js"></script>
In addition to that, you have your two buttons:
<button onclick="one()">I will execute the code from the first file!</button>
<button onclick="two()">I will execute the code from the second file!</button>
Now each button will execute code from different .js files.
If your intention is to use different JavaScript code for different button then make two such functions in the same JavaScript file. Call the required function in the click handler of the particular button.
<button id="test">Test Button</button>
<script>
document.getElementById("test").addEventListener("click", function( event ) {
// display the current click count inside the clicked div
event.target.textContent = "click count: " + event.detail;
}, false);
</script>
It doesn't matter if the functions are in one or in different files, you just need to use
<script src="1.js"></script>
<script src="2.js"></script>
etc. in your html file, depends on how many js files you have .
You can create as many functions as you want. In your html file you just need to use something like this:
<button onclick="function1()"></button>
<button onclick="function2()"></button>
etc.
A simple example: you can put the functions in two different files, and with using the code I mentioned above, it will be still working
function function1(){
document.body.style.background="green";
}
function function2(){
document.body.style.background="black";
}<button onclick="function1()">Green background</button><br><br> <!--This is executing the green background function-->
<button onclick="function2()">Black background</button><!--This is executing the black background function-->
<script>tags.