Hi I was wondering how to format a javascript function as simple as:
function calculate()
{
alert('calculate Cost');
}
so that it can be placed into the assets/javascripts/application.js and be called from the view.
On my view I am calling the function by:
<input type="button" onclick="calculate();" value="calculate">
For some reason the function is not being called but it works if I put the alert message via inline:
onclick="alert('calculate Cost');"
Application.js
function calculate() {
alert('calculate Cost');
}
HTML Page
<html>
<head>
<script type="text/javascript" language="javascript" src="external.js"></script>
</head>
<body>
<input type="button" onClick="calculate();" value="calculate">
</body>
</html>
That code will alert calculate cost when you click on the button.
Related
How to Call JavaScript function on checkbox click event in Asp.Net MVC
This code is not working
#{
ViewBag.Title = "Employee";
Layout = "~/Views/Shared/_MasterLayout.cshtml";
}
<head>
<script type="text/javascript">
function Myfunction()
{
alert("Hello");
}
</script>
</head>
<body>
<input type="checkbox" id="chk1" onclick="Myfunction()" />
</body>
You should have your js code inside Body tag (at bottom). As Js can't able to get any Dom element as it loaded first Before Whole DOM itself.
Ex :-
<!DOCTYPE html>
<html>
<body>
<h1>Test</h1>
<input type="checkbox" id="chk1" onclick="Myfunction()" />
<script>
function Myfunction()
{
alert("Hello");
}
</script>
</body>
</html>
Also you can use Third party Lib to make productivity Fast
USING ( jQuery )
<input type="checkbox" id="checkbox1" />
$("#checkbox1").click( function(){
// YOUR FUNCTION CODE
});
Just Refer this link,you will get complete idea about it
Hope it helps..Cheers
https://jsfiddle.net/a6cedoj0/
Consider this code:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(document).ready(function()
{
$("#submitBtn").on("click", function(e)
{
console.log(911, a);
e.preventDefault();
})
});
</script>
</head>
<body>
<form>
<input type="text" id="a" />
<button type="submit" id="submitBtn">Submit</button>
</form>
</body>
</html>
The a variable is never defined or initialized explicitly, and yet it has a value and references an HTML element. Why is that?
Based on the following issue: When inserting data to database using JavaScript Error creates in console 'Maximum call stack size exceeded'
Although I know a lot about these languages now such as arrays and functions, I'm having a basic problem to getting this JavaScript to run, here's the code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="submit" value="submit" onclick="click()" />
<script>
function click() {
alert("hey");
}
</script>
</body>
</html>
You're running into this problem: javascript function name cannot set as click?
You can fix this by changing the function name to something else like function myClick
<head>
</head>
<body>
<input type="submit" value="submit" onclick="myClick()" />
<script>
function myClick() {
alert("hey");
}
</script>
</body>
</html>
yes,like the comment above. you should use a different name instead of click()
function submit() {
alert("hey"); }
<html>
<head>
</head>
<body>
<input type="submit" value="submit" onclick="submit()" />
</body>
</html>
I have this java script function:
function copyToClipboardCrossbrowser2(text) {
alert(text);
$('#Button1').zclip({
path: '/js/ZeroClipboard.swf',
copy: text
});
}
when I make path: js/ZeroClipboard.swf , google chrome tells me that this file is not exist. but when I put the / it doesn't tell me that it is not working. so the swf is installed.
the alter is printing the correct value. but the copy is not working.
why please?
I already include these:
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.zclip.js"></script>
Note
In another project, I am working with this library, which means my flash player is working
This is the html of the button that has the id Button
<button type="button" id="Button1" class="copyToBtn" onclick="copyToClipboardCrossbrowser2('00971509396782',this);" title="Copy">
Copy Phone Number</button>
I am working asp.net
and this is the code of the button
<button type="button" id="Button1" class="copyToBtn" type="button" onclick="copyToClipboardCrossbrowser2('<%#Eval("Telephone")%>',this);"
title="Copy">
Copy Phone Number</button>
The id is not changing that is why I gave you the html
js fiddle:
http://jsfiddle.net/6HPuC/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/zclip/1.1.2/jquery.zclip.min.js"></script>
<title>Test</title>
</head>
<script>
$(function() {
$("#Button1").zclip({
path: 'http://cdnjs.cloudflare.com/ajax/libs/zclip/1.1.2/ZeroClipboard.swf',
copy: function() {
return $(this).data("copy");
}
});
});
</script>
</head>
<body>
<button type="button" data-copy="<%#Eval('Telephone')%>" id="Button1" class="copyToBtn" title="Copy">Copy Phone Number</button>
</body>
</html>
In your code you have used on button click event to bind zClip with button which is Wrong.
When you attach ZClip to button it will automatically handles OnClick event, no need to write on button event
Below is your modified code
<script type="text/javascript">
$(document).ready(function () {
$('#Button1').zclip({
path: '/js/ZeroClipboard.swf',
copy: $('#Button1').attr('data-copy')
});
});
</script>
And button event will be as below:
<button type="button" id="Button1" class="copyToBtn" data-copy="<%#Eval('Telephone')%>" title="Copy">
Copy Phone Number</button>
I just started learning JavaScript and am wondering why this simple snippet hangs when I click on the "Call function" button. What am I missing?
<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.write("hello");
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
</body>
</html>
You need to write inside an element or give an element a value, or you should use document write like that :
<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.getElementById("lblMessage").innerText = "hello";
document.getElementById("txtMessage").value = "hello";
//document.write("hello");
}
</script>
</head>
<body>
<form>
<script type="text/javascript">
document.write("This is written while page processed by browser !<br />");
</script>
<input type="text" id="txtMessage" /><br />
<span id="lblMessage"></span><br />
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
</body>
</html>
If you simply want to see your button doing something then try:
alert("Hello");
instead of the document.write.
Where do you expect the function to output its "hello"? Right into the button's source code? That makes no sense. The browser is confused and hangs.
Document.write doesn't magically insert something at the end of your document. It writes its stuff out right there where it is called.
Not too sure what you mean by "hang"... Try this out... The alerts can be removed, but will inform you of where it is at in execution...
<html>
<head>
<script type="text/javascript">
function myFunction() {
//for debugging
alert('Made it into function');
document.getElementById('MyOutputDiv').innerHTML = 'Word To Your Mom...';
//for debugging
alert('function complete');
}
</script>
</head>
<body>
<input type='button' onclick='myFunction();' value='Call Function'>
<br>
<div id='MyOutputDiv'></div>
</body>
</html>
document.write, but where? You have to specify this.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello</title>
</head>
<body>
<pre><script type="text/javascript">
function myfunction() {
d = document.getElementById('hello');
d.style.display = "block";
d = document.getElementById('callme');
d.style.display = "none";
}
</script>
</pre>
<div id="hello" style="display:none">
Hello
</div>
<div id="callme">
<input type="button"
onclick="myfunction()"
value="Call function">
</input>
</div>
</body>
</html>
I can't explain the "hang" but please take a look at this page for a primer on document.write: http://javascript.about.com/library/blwrite.htm I would also like to second that you probably want to write to a specific element in the page rather than just overwriting the entire page.