I have an HTML file with the following button:
<button type="button" onclick="muteaudio()" id="testButton">Mute</button>
In the head part i have
<script src="js/functions.js"></script>
In this script i have the following function
function($, window, document, undefined) {
function muteaudio(){
alert("it works");
}
}
I'm doing something wrong that is clear. But what is the correct way to call such a function?
This should work:
muteaudio = function(){
alert("it works");
};
Fiddle:
http://jsfiddle.net/ngn0Lfmf/
Not sure why your function doesn't work though
Check if the file is definitely loading via the F12(Developer Tool) then Sources tab.
Check that you have reloaded the page properly so the cache cleared and loaded the latest version of the file.
If the file is not there then check the path you are using, intellisense should help you find the file:
src="~" using ~ should activate the intellisense and help to find the file.
If the file is there but it is still not working then try copying the script code into your HTML file then you can determine whether it is the File or Code that is the issue:
<script type="text/javascript">
function muteaudio(){
alert("it works");
}
</script>
It may be the position of the file, try rending it in the footer.
UPDATE
I have made a JSFiddle which works with the following code and a Snippet:
function test() {
alert("in function!")
}
<input type="button" onclick="test()" value="mute" />
Related
I have a problem using a javascript inside a joomla article. On clicking the submit button, the entire page is reloaded instead of the java script being executed. The code worked when loaded in the index.php file of the joomla template, but does not work when loaded from a single article for some reason
<div class="top"><form>
<p style="text-align: right;"><label for="power">Power <input id="power" type="number" name="power" /> mW</label></p>
<p style="text-align: right;"><input class="submit" type="submit" value="Calculate" /></p>
</form></div>
The java script
<script type="text/javascript">
/*jslint node: true */
/*global $, jQuery, alert*/
"use strict";
var $jQ = jQuery.noConflict();
alert(location.hostname);
jQuery(document).ready(function () {
$jQ("form").submit(function (event) {
alert("Calculate");
event.preventDefault();
});
});
</script>
Can anyone help me where this is going wrong?
If it works when you add the code manually to a PHP file but not when placed in an article then your editor is probably removing or altering the code. Check your editor settings for something like 'Allow JS' (where this setting is depends on your editor). Alternatively, try setting the editor to 'none' and see if that works.
it looks fine, try debugging the ready() call, by placing an alert() call (or better a console.log()) inside the code, and possibly replacing the ready event to jQuery's:
<script type="text/javascript">
"use strict";
console.log("script is running");
jQuery(function () {
console.log("hooking into submit");
jQuery("form").submit(function (event) {
event.preventDefault();
console.log("alternate submit");
});
});
</script>
Then open the console to see the logs (key F12) this should at least give you some pointers on where it gets stuck.
I want to clear my code a little bit and I want to run my jquery code without any function call in the html file. My actual code is :
HTML:
<head>
<script src="js/colorpick.js"></script>
<script>
$(document).ready(function() {
colorpick_start();
});
</script>
</head>
JS:
function colorpick_start() {
...
}
But if I write for example an alert in the first row of the js without any function call, that works.
alert('test');
function colorpick_start() {
...
}
But this is not working for jquery selectors or something. Is there any solution to get my jquery working without code in the html file?
I want my html file to look like this, if this is possible:
<head>
<script src="js/colorpick.js"></script>
</head>
The
$(document).ready(function() {
Waits until the DOM is ready for selectors etc.
If you add the
$(document).ready(function() {
to your colorpick.js file it will wait for the DOM to be ready and then execute colorpick_start().
And believe me this catches out most people when they start using JQuery.
In order to achieve this:
<head>
<script src="js/colorpick.js"></script>
</head>
Move the document ready call to the js file you are referencing in your HTML file and make sure that the method called is present.
$(document).ready(function() {
colorpick_start();
});
This should so it.
Put your script
<script src="js/colorpick.js"></script>
before </body> tag. This will ensure that your page is loaded fully before script starts.
$(document).ready(function() {
colorpick_start();
});
this code is working because you are calling your function after document is loaded. document load is event. you can put your function on any event you want, but it wont start if you just define your function. You have to somehow call your function. example would be on click (or on document load)
<div id="example"></div>
$("#example").on('click', function () {
your function here
});
Use that code:
$(function(){
$('.colorpicker').val("colorpicker"); //or whatever you like
});
Plnkr example code
I am working with the MVC4 application with the aid of an external js file. In the view (.cshtml) file, I have a function which performs an action of creating the row in the grid,
based on the button click.
I have defined the button click in the external .js file.
But, when I tried to call the internal script function from that external js file method, it throws an exception saying that, that particular method is not defined.
I surfed but was not able to find a convincing answer..
Is what I'm trying possible??.. How should I achieve it??
Can any Js expert out there help me with this?...
Thanks All...;)
EDIT:
this is in external .js file:
$('#AddRowButton').on('click', function () {
window.CreateRow();
}
in my view:(.cshtml)
<script>
function CreateRow()
{
// creting row goes here...
}
window.CreateRow = CreateRow; //defined like what #joseeight suggested...
</script>
This is most likely due to a scoping issue. The internal script and external must be in a different scopes. The easiest, and hackiest, way to get around this would be to add the internal method to the Window, and access it as such in the external.
//Internal script
function myInternalMethod () {
//some code..
}
window.myInternalMethod = myInternalMethod;
Since window is global, and the name is the same, you could either use window.myInternalMethod or myInternalMethod when referencing it in the external scripts.
Make sure your external file is included below the internal
.......
<script>
function createRow(){
console.log('created');
}
</script>
<script src = "external.js"></script>
</body>
yes it is possible only when you call that external js file from html where that internal javascript have..
Example :
a.html
<html>
<head>
<script type="text/javascript">
function displayAlert(){
alert('displayAlert');
}
</script>
<script type="text/javascript" src="../../abc.js"></script>
</head>
<body>
//call the sample() javascript function which is in abc.js
</body>
</html>
abc.js
function sample(){
displayAlert();
}
I am using jQuery a lot, but sometimes I get stuck because my browser cannot see the jQuery library, or maybe loads the library after running the my JavaScript code.
Pseudo-code to explain my question:
<html>
<head>
I always load CSS here
I always load jquery here
</head>
<body>
<p class="link-style3"><span id="my_tag"><span>Bize Hemen Yazın</span></span></p>
<script>
$(function() {
$('#my_tag').click(function(e) {
alert('tesrt');
});
});
</script>
</body>
</html>
I always put my stuff in the order like below, but this doesn't work now. When I click the <span id="my_tag">, it doesn't do anything, and doesn't return any error.
what should I do?
Here is the entire code jsfiddle
Try to avoid some syntax errors like(suggestable only)
<script type="text/javascript">
$(function() {
$('#my_tag').click(function() {
alert('tesrt');
});
})
</script>
and put your code at the top after you load the js files
A few things you can do:
inspect your document (network pane in devtools) to see if everything
is loading correctly
Move your scripts to the bottom of the page
use $(document).ready(function(){ ... });
I created a .js file, and then included it in the HTML pages by:
<script type="text/javascript" src="yourexternalfile.js"></script>
How do I call the function of the .js file using onclick = "...." ?
I know that it will be something like:
<input type="BUTTON" value="Exit" onclick="javascript: ???;" >
but I can't figure it out...
If you are using JQuery, you can do it like this,
<input type="button" onclick="javascript: $.getScript('../scripts/yourfilepath' , function (){ youFunctionCall() ; } );" />
This will download the JS file when the button is cliked and shall execute the function called within.
Say your function was ...
function myFunction() {
alert("hello!");
}
An example of the trigger would be ...
<input type="button" onclick="myFunction(); return false;" value="Click me!" />
To call a function inside an external file, make sure the file is loaded first and then call it as per normal (so long as it exposes itself to the scope you need it to).
include the external java script file in your page(preferably in the head tag) using
<script type="text/javascript" src="yourexternalfile.js"></script>
and then you can call any function defined in the js file
use <script type="text/javascript" src=""> to import the js file inside your page.
Knowing when a JS file is (a) loaded, and (b) done executing is tricky, as it isn't supported by all browsers.
I believe you're thinking something along the lines of:
var s = document.createElement("script"),
f = document.getElementsByTagName('body')[0];
s.type = 'text/javascript';
s.src = "https://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/dojo.xd.js";
s.addEventListener("load", function() {
console.log("script loaded");
});
f.appendChild(s);
Like I've mentioned above, it won't work for all browsers. And even if it does, it won't be very useful to you if you're actually trying to execute some code based on the JS that is pulled-in dynamically.
The only reliable way to execute something when a dependency is loaded is to wrap that dependency in a function. That way when the browser parses that JS it will execute that function, which will let you know that you can start using whatever it is that you wanted to bring in. This is exactly why JSONP works the way it works.
If this is what you want to do, take a look at RequireJS.
Have you tried actually putting in the name of the function? Like onclick='myFunction()'
I would suggest adding the on-click event in the JS file like so:
html:
<input type="button" id="myButton"/>
JS file:
var myButton = document.getElementById('myButton');
myButton.onclick = function(){myFunction()};
This way you can program the element from the Javascript file.
Just put it in a function that you call on-load.