javascript function - javascript

i have Html document A.html and javascript file A.js, how to write a code in javascript within html body THAT SPECIFIES FUNCTION res AS THE EVENT HANDLER FOR THE onclick EVENT FOR THE BUTTON DEFINED IN THE FORM?
A.html-----------
<body>
<form>
<input type = "button" id="butt1" value = "Press for Results" /><br />
</form>
<script type="text/javascript">
</script>
</body>

This is a pretty poorly written question, but I think what you want to do is pretty straightforward. When you include an external script with
<script type="text/javascript" src="A.js"></script>
It's all there for the following execution. Thus if A.js has the following:
function res() {
...
}
You can use specify that in your HTML, as such:
<button onclick="res()" value="call res()">

I think this is what you mean..
a.html:
<head>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<form>
<input onclick="javascript:res();" type="button" id="butt1" value="Press for Results" /><br />
</form>
</body>
a.js:
function res()
{
alert("function logic to go here");
}
If you want all the code on the one page..
<head>
<script type="text/javascript">
function res()
{
alert("function logic to go here");
}
</script>
</head>
<body>
<form>
<input onclick="javascript:res();" type="button" id="butt1" value="Press for Results" /><br />
</form>
</body>

A.html
<script type="text/javascript" src="A.js">
<form>
<input type="button" name="test" value="Click me" onclick="inform()">
</form>
A.js
function inform(){
alert("You have activated me by clicking the grey button! Note that the event handler is added within the event that it handles, in this case, the form button event tag")
}
All at once
<script type="text/javascript">
function inform(){
alert("You have activated me by clicking the grey button! Note that the event handler is added within the event that it handles, in this case, the form button event tag")
}
</script>
<form>
<input type="button" id="button" name="test" value="Click me" onclick="inform()">
</form>
Calling function in javascript
if(condition in which you want onclick to b called)
document.getElementById('button').click();

Related

JS not firing at all

I cannot get my button to trigger the javascript. This seems to be quite straightforward? What is keeping the alert from showing up?
<script type="text/JavaScript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
$(document).ready(function ()
{
$("#submitButton").click(function (e) {
alert("Hello!!");
});
});
</script>
<input type="submit" name="submitButton" id="submitButton" class="form-input" value="ButtonName"
OnClick="ActionName" runat="server" />
You should end of the script tag if you add source only. And you should add extra script tag for internal script. And input type should be button because you are not submitting a form in here. If you will submit something, you should use a form element and listen it's submit event. You can use input type="submit" for it.
$(document).ready(function ()
{
$("#submitButton").click(function (e) {
alert("Hello!!");
});
});
<script type="text/JavaScript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<input type="submit" name="submitButton" id="submitButton" class="form-input" value="ButtonName"
OnClick="ActionName" runat="server" />

ReferenceError: Can't find variable X when calling JS function (or variable) from HTML file

I am trying to call a function in an external JavaScript file from an HTML-file. The goal is to work with the content of a form there.
I tried so many things and always got the Error "ReferenceError: Can't find variable: X"
The positioning of the jquery javascript file loading
The positioning of the <script src="XXX"> call
Calling the function from the button "onclick" or the form "onsubmit"
Trying to call the javascript file from an embedded script in the HTML
This is what my JavaScript file and my HTML looks like right now:
function submit(e) {
answerText = document.getElementById("text").value;
// Do something with it.
}
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
<form id="validation-form" onsubmit="return submit(e)">
<input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
<button type="button" class="btn btn-primary" onclick="submit(e)">Send</button>
</form>
</body>
I also tried
function doSomething() {
// Do something
}
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
<form id="validation-form" onsubmit="return submit(e)">
<input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
<button type="button" class="btn btn-primary" onclick="submit(e)">Send</button>
</form>
<script>
function submit(e) {
doSomething();
}
</script>
</body>
In both cases, it returned the same error over and over again: "ReferenceError: Can't find variable: X". In the first example, X being "submit" and in the second "doSomething".
All help is very welcome. I know there are similar headlines here, but non of the solutions did anything for me.
Hey so when I ran the code without the e as a parameter for the submit function in the html it didn't give me the error. I think it may be because the e is the place holder for the text of the submit function in this case. Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
<form id="validation-form" onsubmit="return submit(e)">
<input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
<button type="button" class="btn btn-primary" onclick="submit()">Send</button>
</form>
<script type="text/javascript">
function submit(e) {
answerText = document.getElementById("text").value;
// Do something with it.
}
</script>
</body>
</html>

Change value of input field inside form with 'getElementById'

<html>
<head>
</head>
<body>
<form>
<input type="number" id="number1">
<input type="number" id="number2">
<button onclick="dosomething">Click Me</button>
</form>
<script>
function dosomething(){
document.getElementById("number2").value=document.getElementById("number1").value
}
</script>
</body>
</html>
The JS function would change the number inside the second input field of the form, but it's not happenning.
May I know what went wrong? Thanks!
By default, a <button> will submit it's parent <form> so your page gets directed to the action (since this is empty, likely the page gets POSTed to the current URL). You need to update your function to stop this from happening. You also need to execute the function in your onclick handler: in its current form, no function is called. onclick="foo" isn't one - onclick="foo(event)" is.
HTML:
<!-- Pass the event object through to your function -->
<button onclick="dosomething(event)">Click Me</button>
Script:
function dosomething(e){
// Stop form submission
e.preventDefault();
document.getElementById("number2").value=document.getElementById("number1").value
}
function dosomething(e){
e.preventDefault();
document.getElementById("number2").value=document.getElementById("number1").value
}
<form>
<input type="number" id="number1">
<input type="number" id="number2">
<button onclick="dosomething(event)">Click Me</button>
</form>
<script>
</script>
Replace your button with following line
<button onclick="dosomething()">Click Me</button>

event's are not getting added

<!doctype html>
<html>
<head>
<title></title>
<!--binding handlers to object-->
<script type="text/javascript">
<!--
function showAuthor()
{
alert("oscar wilde");
}
function enableEvent()
{
document.getElementById('someText').attachEvent("onmouseover",showAuthor);
}
function disableEvent()
{
someText.detachEvent("onmouseover",showAuthor);
}
//-->
</script>
</head>
<body onload="enableEvent();">
<em id="someText">we may be in the gutter ,but some of us are looking at the stars</em>
<form action="#" method="get">
<input type="button" value="Attach event" onclick="enableEvent();" />
<input type="button" value="Detach event" onclick="disableEvent();" />
<input type="button" value="show author" onclick="showAuthor();" />
</form>
</body>
</html>
I have used the above code to implement event handlers, but when I execute the program event handlers are not attached. Why?
I am guessing that you need to use addEventListener. And when using addEventListener, you do not need to put an "on" prefix with the event names.
Snippet:
<script type="text/javascript">
function showAuthor() {
alert("oscar wilde");
}
function enableEvent() {
document.getElementById('someText').addEventListener('mouseover', showAuthor);
}
function disableEvent() {
document.getElementById('someText').removeEventListener('mouseover', showAuthor);
}
</script>
<body onload="enableEvent();">
<em id="someText">we may be in the gutter ,but some of us are looking at the stars</em>
<form action="#" method="get">
<input type="button" value="Attach event" onclick="enableEvent();" />
<input type="button" value="Detach event" onclick="disableEvent();" />
<input type="button" value="show author" onclick="showAuthor();" />
</form>
Hope this helps.
This
document.getElementById('someText').attachEvent("onmouseover",showAuthor);
should have been like this
document.getElementById('someText').addEventListener("mouseover",showAuthor, false);
You don't want to attach an event but you want to add an event listener.
Furthermore, you don't want to detach any event but you want to remove an event listener, whose syntax is like this:
document.getElementById("someText").removeEventListener("mouseover",showAuthor, false);
var someText = document.getElementById("someText");
function showAuthor(){
alert("oscar wilde");
}
function enableEvent(){
someText.addEventListener("mouseover",showAuthor, false);
}
function disableEvent(){
someText.removeEventListener("mouseover",showAuthor, false);
}
<body onload="enableEvent()">
<em id="someText">we may be in the gutter ,but some of us are looking at the stars</em>
<form action="#" method="get">
<input type="button" value="Attach event" onclick="enableEvent()" />
<input type="button" value="Detach event" onclick="disableEvent();" />
<input type="button" value="show author" onclick="showAuthor()" />
</form>
</body>
For a detailed explanation of the above, please have a look at the following links:
EventTarget.addEventListener
EventTarget.removeEventListener

jQuery click event syntax

The below code works well on localhost using XAMPP. But it doesn't work on another server.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-latest.js"></script>
</head>
<body>
word: <input type="text" id="sub" />
user: <input type="text" id="user" />
<button type="button" id="btn">Click Me!</button>
<script>
$("#btn").click(function () {
var word=$("#sub").val();
var usr=$("#user").val();
alert("hi");
});
</script>
</body>
</html>
I have got 2 errors from Chrome inspect element:
Uncaught SyntaxError: Unexpected end of input jquery-latest.js:5669
Uncaught ReferenceError: $ is not defined
check jquery-latest.js is same directory with html file. Otherwise code is ok and also works.
add type in the script. try this
<script type="text/javascript" src="jquery-latest.js"></script>
You need to wire up the click handler in the $(document).ready() event.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#btn").click(function () {
var word=$("#sub").val();
var usr=$("#user").val();
alert("hi");
});
});
</script>
</head>
<body>
word: <input type="text" id="sub" />
user: <input type="text" id="user" />
<button type="button" id="btn">Click Me!</button>
</body>
</html>

Categories