I need a pure JavaScript equivalent of this Jquery code:
because the use of libraries isnt allowed in my current project,
File handler.js
$(document).ready(function(){
$("#some_button").click(function(){
alert('ok. works');
});
});
File index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="handler.js"></script>
<head>
<body>
<button id="some_button">Btn</button>
</body>
</html>
Put this in your handler.js file:
window.onload = function() {
document.getElementById('some_button').addEventListener('click',
function() {
alert('ok. works');
}, true);
};
NB: this won't work on older IE versions that don't support addEventListener. You could be lazy and use the DOM0 element.onclick method instead.
function buttonClick() {
alert('ok. works');
}
File index.html
<!DOCTYPE html>
<html>
<head>
<head>
<body>
<button id="some_button" onclick="buttonClick()">Btn</button>
</body>
</html>
Related
I'm working on an asp.net mvc project and i have a problem with some javascripts functions.
I would like to execute functionA (from layout) & functionB (from a webpage) when the page is loading.
_Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
</body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
function functionA() {
alert("Hello from Layout");
}
window.onload = functionA;
</script>
</html>
Webpage.cshtml:
#{
ViewData["Title"] = "***";
}
<div>
...
</div>
#section Scripts
{
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
function functionB() {
alert("Hello from WebPage");
}
window.onload = functionB;
</script>
}
window.onload is only working for the layout so when i'm going the the Webpage i can see "Hello from Layout" and not "Hello from Webpage".
Do you have an idea to perform both functions?
Thanks :) .
I managed to make it work like this:
window.onload = function () {
myFunction();
}
I have a form with a button written in a .asp page and when it's clicked, it calls for a js function. I need to figure a way to debug this using developer tools.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$("#butReport").bind("click", butReport_onClick);
});
function butReport_onClick() {
var cReportOptions = null;
//some code
};
</script>
</head>
<body>
some code.
</body>
</html>
I don't think this has anything to do with classic ASP.
You are missing the jQuery definition in this code, see here https://www.w3schools.com/jquery/jquery_get_started.asp
I added this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$("#butReport").bind("click", butReport_onClick);
});
function butReport_onClick() {
var cReportOptions = null;
//some code
console.log("Hello");
};
</script>
</head>
<body>
<div id="butReport">some code.</div>
</body>
</html>
When I click it I get this:
I hope this helps
button written in asp with id="butReport". Using javascript:
<button id="butReport"></button>
<script type="text/javascript">
var elem=document.getElementById('butReport').onclick = function(){
// some code
// test not using console.log();
document.getElementById('hasilnya').innerHTML = 'test';
}
</script>
<div id="hasilnya" style="margin-top:1em;"></div>
I use mvc5. Do not include jQuery in test.
_Layout.cshtml:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title></title>
</head>
<body>
#RenderBody()
</body>
</html>
Test.cshtml:
<script type="javascript/text">
function myFunction() {
alert("its is working");
}
</script>
<button onclick="myFunction()">Click me</button>
In result I have an error: ReferenceError: myFunction is not defined
and the result code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title></title>
</head>
<body>
<button onclick="myFunction();">Click me</button>
<script type='text/javascript' >
(function($){
function myFunction() {
alert("I am working");
};
})(jQuery);
</script>
</body>
</html>
I have read a lot about this error and have not founded the answer. Could you clarify, who wrap JavaScript code? Is there any flag to cancel it? Is there any other way to resolve the problem?
Something (probably MVC5) is wrapped your code for you, but with good reason. Putting onclick handlers on elements pointing at a globally declared function is how JS was written in the '90s.
To resolve it, put an id attribute on your button and remove the inline event handler:
<button id="mybutton">
and then use jQuery to register the event handler:
$('#mybutton').on('click', function () {
alert("I am working");
});
or, since you mentioned in later comments that you have a loop generating these elements, use a class and a data- attribute instead:
<button class="myclass" data-id="...">
with code:
$('.myclass').on('click', function() {
var id = $(this).data('id');
...
});
<script>
function myFunction() {
alert("its is working");
}
</script>
<button onclick="myFunction()">Click me</button>
This will work. cheers
I am using window.opener.functionName() in IE to call the parent function from a child window, which is working perfectly fine. However, the same is not working in Chrome/Firefox.
I tried window.top.functionName(); parent.window.top.functionName() and numerous others. None are working.
Can anybody help!
EDIT
Here is the code.
Note that I have 2 level hierarchy. I need to call the updateHTML() function of Parent.jsp from ChildCall2.jsp file
Parent.jsp
<!DOCTYPE html>
<html>
<head>
<TITLE>Parent function call test</TITLE>
<script>
function openwindow(url)
{
Hints=window.open(url, 'Hints', "resizable=yes,scrollbars=yes,width=475,height=225");
if(Hints.blur)
Hints.focus();
}
function updateHTML()
{
alert("Parent called successfully");
}
</script>
</head>
<body onFocus="">
Click Me
</body>
</html>
ChildCall.jsp
<!DOCTYPE html>
<html>
<head>
<TITLE>Child function call test</TITLE>
<script>
function openwindow(url)
{
Hints=window.open(url, 'Hints', "resizable=yes,scrollbars=yes,width=475,height=225");
if(Hints.blur)
Hints.focus();
}
function updateHTML1()
{
alert("Parent call function");
window.opener.updateHTML();
}
</script>
</head>
<body onFocus="">
Click Me
</body>
</html>
ChildCall2.jsp
<!DOCTYPE html>
<html>
<head>
<TITLE>Child function2 call test</TITLE>
<script>
function openwindow(url)
{
Hints=window.open(url, 'Hints', "resizable=yes,scrollbars=yes,width=475,height=225");
if(Hints.blur)
Hints.focus();
}
function updateHTML2()
{
alert("Parent call function2");
window.opener.updateHTML1();
}
</script>
</head>
<body onFocus="">
Click Me to call parent function
</body>
</html>
All your pop-ups have the same name (window.open(url, 'Hints', ...)), this might confuse some browsers so they recognize some other window being their opener.
Just a sidenote, detecting if a window has blur method is unnecessary, just do Hints.focus().
For example suppose I have
function myTest() {
return "test";
}
defined in <head>
In body if I try to call myTest() it fails. How can I make functions and variables accessible from body?
Script in the head tag will get parsed first, so your variables and functions are accessible from script in the body tag. Your problem must be elsewhere, because the following example works:
<!doctype html>
<html>
<head>
<script type="text/javascript">
function myTest() {
return "test";
}
</script>
</head>
<body>
<script type="text/javascript">
alert(myTest());
</script>
</body>
</html>
You need to place all JavaScript into <script>...</script> tags, OR, place it in event handling attributes (like onclick).
<html>
<head>
<script type="text/javascript">
function myTest() {
alert("hi");
}
</script>
</head>
<body>
<input type="button" onclick="myTest();" />
</body>
</html>
This is Your function in Head..
function myFunction(a)
{
return (a)
}
Then call like below
<script type="text/javascript">
myFunction(12);
</script>