I am trying to understand the Execution Order of HTML and JS functions.
Code:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementsByName("check1");
x[0].disabled=true;
x[0].checked=true;
x[0].value="Y";
}
function myFunction1()
{
var x=document.getElementsByName("check1");
alert(x[0].value);
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<form>
<input type="checkbox" name="check1" unchecked enabled value="N"/>
<input type="button" value="Button" onclick="myFunction1()"/>
</form>
</body>
</html>
Finally the element "check1" value is =Y.
finally checkbox is checked and disabled.
Can anyone explain about this.
I have already gone through this link which is very useful:
Load and execution sequence of a web page?
Still the above example will help bit more .Thanks
first you change the name of functions.. it must be different. then the execuation order is
first onbody load function is called then input button function called.
you can even check it by alert that.
The "myFunction()" method called in on load event so that it executed immediately after a page is loaded. and the function "myFunction1()" called on button click event .And you are initializing check box value with "N" value thats why it displaying n after every page load function
If I understood your question you mean why your checkbox value is 'Y' despite you disabled the checkbox.
disabling checkbox only make it inactive as far as User Interface is concerned but through script you can still change the value.
Related
I'm trying to implement a function that will create new divs inside another div based on the number typed by user.
I wanted to do this with addEventListener to the input and ran a test to check if it even works. But it doesnt and I dont know what im doing wrong. Here is my HTML code:
<form>
<p>Pick how many dice you want to roll:</p>
<input id="diceNumber" type="number" name="diceNumber">
</form>
and JS part:
var numInput = document.querySelector("input");
numInput.addEventListener("change", function(){
alert("test");
});
How are you including your javascript file in the html document? It may be possible that your JS code is being executed before the html is loaded.
It is hard to answer only with these 2 snippets.
My guess is that you have something like
<html>
<head>
<script>
var numInput = document.querySelector("input");
numInput.addEventListener("change", function(){
alert("test");
});
</script>
</head>
<body>
<form>
<p>Pick how many dice you want to roll:</p>
<input id="diceNumber" type="number" name="diceNumber">
</form>
</body>
</html>
In this case, the script will be executed before the dom is loaded which is why the code cannot find the input.
you either have to wait that the dom is ready or move the script block after the definition of the input.
Hello everyone and sorry for my english.
Following this jdfiddle, I have a problem I don't understand.
First I change the value of the input, then I click on the button and what I expected to see is "click" but I see "change" meaning onclick is called after onchange.
<input type="text" onChange="alert('change')" />
<button type="button" onClick="alert('click');">Click!</button>
I found on this post that it's because of chrome which fires onchange event before the onclick event. But I don't really have the same need as this post because my event are not declared in the same tag. And secondly, if I click on the button I would like to only execute the onclick function and not onclick and then onchange (this methods consists in using onMouseDown).
Do you have a good method to do that?
Ok so I can see that you really wan't this.
You could let the on change function run first, and then afterward see what has focus, if it is that button, you would know that it was clicked, and thus was the reason for loosing focus.
you cannot check this while the change function is running, as the body still has focus at this time..
<head>
<script language="javascript">
function focussed()
{
var triggerElement = document.activeElement
alert(triggerElement)
console.info(triggerElement)
}
function change()
{
alert("change")
setTimeout(focussed, 1)
return true
}
</script>
</head>
<body>
<input type="text" onChange="alert('change')" />
<button type="button" onClick="alert('click');">Click!</button>
</body>
I am currently in the middle of the development of a website. If a user presses a button an javascript function needs to be called. I simplified this function to:
<html>
<head>
<script type="text/javascript">
function newProd(number,customer,software,hardware,name)
{
//I simplified this function
alert('number is: '+number+'customer is: '+customer+' software is: '+software+' hardware is: '+hardware+' name is: '+name);
}
</script>
</head>
<body>
<input type="text" name="textfieldCustomer"><br>
<input type="text" name="textfieldSoftware"><br>
<input type="text" name="textfieldHardware"><br>
<input type="text" name="textfieldDescription"><br>
<input type="button" name="button" value="go to function" onClick="newProd('a number',textfieldCustomer.value,textfieldSoftware.value,textfieldHardware.value,textfieldDescription.value)">
</body>
when the user presses the button in Internet explorer, the function works perfectly! Unfortunately the function does not work in Chrome or Safari.
Does anyone have any idea what is going wrong?
The form fields are not supposed to be defined as global variables. Maybe in IE they are but that's not a behavior you can depend on. Try this:
onClick="newProd('a number',
this.form.textfieldCustomer.value,
this.form.textfieldSoftware.value,
this.form.textfieldHardware.value,
this.form.textfieldDescription.value)">
Oh, and add a form to wrap the inputs of course.
Demo: http://jsfiddle.net/kdUMc/
In my eyes there are two big mistakes in your code. First, the access to inputs fields is wrong. It needs a connection to an instance variable, like 'document'. The second one, the form tag is missing. If you wrap the input fields into a form tag you can access the values as Esailija has posted.
I want to execute a command by the click of a button, and not when the page loads.
function hey() {
alert('bla');
}
Do I add something to the code above or to the button?
<input type="button" value="Click Me" onclick="hey()" />
Have you taken the time to type in your question into the magical Google box yet? Surely you'll see something like this:
<input type="button" value="Click me, now" onclick="hey()" />
Say you have the function that alerts a window to the user.
<script type="text/javascript">
function showMe() {
alert('You clicked on the button');
}
</script>
<button onclick="showMe()">Button</button>
This will make sure that the function is only called when the button is clicked upon and not when the page is loaded.
Okay, so you have a code that should work for alerting something on the click of a button. But you state that the code is running on page load. You have to check you code, looking for:
An onload attribute on the body tag, something like <body onload="hey()">
A call to hey somewhere else on your js code. Look for hey().
Maybe a reference to the button followed by a call to .click()
There is something else on your code causing the function to be called, you'll have to scan your code to find out what it is.
I'm reading a tutorial of Javascript, I'm making a html file with a javascript function with a box, the fact is that the alert does not show what goes into the text field, what am I doing wrong ?, this is my code. I'm not entirely clear, how it handles the event onBlur, someone explain more about it? as in the tutorial the only explanation they give is "Losing the focus control," I don't know what they mean by the word focus, or how it is handled the text box, without enter botton.
<html>
<head>
<script>
function show ()
{
var age= parseInt (cage.value);
if (age<=18)
alert("access denied");
else
alert("Welcome");
}
</script>
<title> New Page I </title>
</head>
<body>
Age:
<input type="text" id "cage" name="cage" size="10"
onBlur=show();>
</body>
</html>
The onBlur event fires when the current control loses focus. When a control has focus, meaning that it's currently "selected", things that can cause it to lose focus include clicking on another control or pressing the tab key.
The reason your method does not work properly is because it has a small error. Try this:
<html>
<head>
<script>
function show(el)
{
var age = parseInt(el.value);
if (age<=18)
alert("access denied");
else
alert("Welcome");
}
</script>
<title> New Page I </title>
</head>
<body>
Age:
<input type="text" id="cage" name="cage" size="10" onBlur="show(this);" />
</body>
</html>
You have to use () after function name and look up the element first and then retrieve the value from it.. here is sample code.. (should work, not tested)
function show(){
var age = document.getElementById('cage').value;
if (parseInt(age, 10)<=18)
alert("access denied");
else
alert("Welcome");
}
the onBlur event is fired when you click on anything other than the input box (e.g. clicks another one, or click on a link to something). Basically, if you can't type in the input field, it does not have focus.
As for why it's not working, see #Teja Kantamneni 's answer, which should make it work.
You can getting an error because you are missing the parentheses() after the function declaration. Even if you have a function with no parameters must include the parentheses () after the function name.
Focus is when a form element receives control, so you can type in it or change options of a dropdown. Like onBlur there is also an onFocus event.
Focus is generally set on page load. so when the page is loaded so user does not have to go and click on the first field they need to fill in.
In this example you can have:
Javascript
function setFocus(){
document.getElementById('cage').focus();
}
HTML
<body onLoad="setFocus();">