I am a beginner to javascript, and am trying to learn how to use text boxes because I can't seem to find a page that is simple enough for me. This is what I have, but when I click the button, it just returns [object HTMLInputElement]. Could someone please tell me what i did wrong and help me fix it? Thanks.
<html>
<head>
<script language="javascript">
function displaynumber(){
var number1= document.getElementById("num1");
alert(number1).value
}
</script>
<title>
ok
</title>
</head>
<body>
<form>
Input the first number<input type="text" id="num1">
<input type="button" value="submit" onClick="displaynumber()">
</form>
</body>
</html>
You should correct your typo:
alert(number1).value
to
alert(number1.value)
You are alerting number1 and then trying to read the value property of the return value of alert().
Move the property accessor inside the function call.
alert(
number1.value
);
Related
I just finished the W3 Schools certification course on JavaScript.
Can somebody explain why the returnValue() function works for the inField element, but not for the output element.
I'm guessing I have to create a variable and then reference the variable with the output element. Even if that is the solution I'd like to understand the logic behind this necessity.
Any assistance is appreciated.
HTML
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<div id='output'>Output: </div>
<div> Enter a value: <input type="text" id="inField"> </div>
<button onclick="returnValue()" id="submit">Submit</button>
</body>
</html>
JavaScript
function returnValue() {
document.getElementById("inField").value="Test";
document.getElementById("output").value="Test";
}
This question has been asked a lot it seems on Stack Overflow but none of the solutions seem to be working. I am developing a web application where I have to fill in data in data fields on page load. Here is my code:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<input type="text" id="datetime" value="" />
<script type="text/javascript">
$(document).on("pageload",function(){
//for fill field
document.getElementById("datetime").value = "here is value";
});
</script>
</body>
</html>
For some reason, when I load the page, no data gets filled in, does anyone see the reason for it?
You don't need jQuery. Try this:
<!DOCTYPE html>
<html>
<body>
<input type="text" id="datetime" value="" />
<script>
window.onload = function() {
document.getElementById('datetime').value = 'here is value';
};
</script>
</body>
</html>
What version of jquery are you using? Looks like pageload might deprecated and you should use pagecontainerload
Or better yet use the $(document).ready or .load methods?
In Jquery it's called document ready event... So use the below syntax.
$(document).ready(function(){
//for fill field
$("#datetime").val( "here is value");
});
Note the inner line of code has been changed.. This is the Jquery way of doing the same thing...
You can also use this Shorthand to $(document).ready(function(){
That is $(function(){
I have the following code
<!DOCTYPE html>
<html>
<head>
<script>
var object = document.getElementsByName("test");
console.log(object[0]);
</script>
</head>
<input type="hidden" name="test" value="Hi"/>
</body>
</html>
I need it to log "Hi", though it is failing, It says that index [0] is undefined even though when only console logging the object I can see it perfectly along with the value.
I tried using it without an index and it failed obviously because it is a NodeList, I can't see exactly what is wrong and I tried to fix it a lot. I'm sure that index 0 is there and that there is value though I cannot access it..
It's because your javascript is executing before the DOM completes loading.
If you put your script after the <input>, your console will show up an [HTMLInputElement]. Then show up the value
<!DOCTYPE html>
<html>
<head>
</head>
<input type="hidden" name="test" value="Hi"/>
<script>
var objectTag = document.getElementsByName("test");
console.log(objectTag[0].value);
</script>
</body>
</html>
The console is returning undefined because you're trying to access a DOM element (the input) before it has even been parsed by the browser.
Place your <script> after the HTML you're trying to access.
<body>
<input type="hidden" name="test" value="Hi"/>
<script>
var object = document.getElementsByName("test");
console.log(object[0]);
</script>
</body>
Try this :
<!DOCTYPE html>
<html>
<head>
</head>
<input type="hidden" name="test" value="Hi"/>
<SCRIPT language=javascript>
var object = document.getElementsByName("test").value;
console.log(object);
</script>
</body>
</html>
It is because you are getting the Dom elements before it's loading finished
use the script as below
<input type="hidden" name="test" value="Hi"/>
<script>
var object = document.getElementsByName("test");
console.log(object[0]);
</script>
or
you can use external Javascript file and place your coding in javascript file as below
$(document).ready(function(){
var object = document.getElementsByName("test");
console.log(object[0]);
}
Alright, people of Stack Overflow, I have a question for you: I am in a web design class at my high school and learning ahead of the class since I already knew the first half of the class. I was asked by my teacher if I could teach what I have learned about Javascript and I agreed. However, one of the things she wanted me to teach is not working for me when I try it out on my own. I am trying to do a simple check for a variable that when you input a name into a box, if it is my name or the teacher's name it pulls up a popup that says "welcome" or something like that, and if it is anyone else it says "go away" the only issue is that no matter what I try something in the code is not working. This is a test function that I have at the moment; it is intended to print out the
<!doctype html>
<html>
<head>
<script type="text/javascript">
var name = document.KageForm.User.value;
function validator(){
alert(name);
}
</script>
</head>
<body>
<form name="KageForm">
Username:<input type="text" name="User">
<br/>
Password: <input type="password" name="pass">
<br/>
<input type="button"value="Submit" onclick="validator()" />
</form>
<script type="text/javascript">
</script>
</body>
</html>
Here is the full version of the code that I am trying to get to work:
<!doctype html>
<html>
<head>
<script type="text/javascript">
var name = document.KageForm.User.value;
function validator(){
if(name=="Kage Kaldaka"){
alert("Eeyup")};
else
alert("Nnope");
}
</script>
</head>
<body>
<form name="KageForm">
Username:<input type="text" name="User">
<br/>
Password: <input type="password" name="pass">
<br/>
<input type="button"value="Submit" onclick="validator()" />
</form>
</body>
</html>
You have several issues here:
You have a semicolon after the if statement
You are reading the name value on page load, at a point when the input field hasn't even been added to the page yet and certainly hasn't been filled out by the user yet. You need to read it when the user submits the form, i.e. you need to move the name assignment inside the validator method:
JS:
function validator(){
var name = document.KageForm.User.value;
if(name=="Kage Kaldaka"){
alert("Eeyup");
} else {
alert("Nnope");
}
}
There shouldn't be a semicolon after the if. You also have to put the variable inside the function to make it update:
function validator(){
var name = document.KageForm.User.value;
if(name=="Kage Kaldaka"){
alert("Eeyup")
} else {
alert("Nnope");
}
}
JSFiddle: http://jsfiddle.net/FhCTc/1/
You are setting your variable outside your function:
<script type="text/javascript">
var name = document.KageForm.User.value;
function validator(){
if(name=="Kage Kaldaka"){
alert("Eeyup")};
else
alert("Nnope");
}
</script>
This means var name is set when the page loads, but no other times. Move it into validator().
You also ended your if with a semi-colon, which would cause an error on the else portion.
Besides all the previous answers it is in good manner in JavaScript to use === not ==
Radio buttons and JS suck. Ok now that I got that out of my system here is my problem: I finally got Javascript to acknowledge the radio button's value after reading getElementById not playing nice with Radio Buttons
I can alert the value but document.write(); won't work?
Here is my code:
<html>
<head>
<script type="text/javascript">
function getRadioValue() {
var y=document.getElementById('draftrequirement_2').value;
document.write(y);
return y;
}
window.onload = function() { alert(getRadioValue()); }
</script>
</head>
<body>
<input onchange="checkRadio()" type="radio" name="draftrequirement" value="na" id="draftrequirement_2" />
</body>
</html>
In Firefox 5 and Chrome 12 I see 'na' in both the alert and the document, so the document.write() seems to work in those browsers. The radio input is not present after the window load event, though.
Can I ask you why you are using document.write()? There are many alternatives to manipulating the DOM. From w3schools.com (http://www.w3schools.com/js/js_howto.asp)
Note: Try to avoid using document.write() in real life JavaScript code. The entire HTML page will be overwritten if document.write() is used inside a function, or after the page is loaded. However, document.write() is an easy way to demonstrate JavaScript output in a tutorial.
Do not use document.write(). Ever!
Make your life easier and start using jQuery or similar library for manipulating DOM.
If you need to do it with pure javascript only, this should work:
<html>
<head>
<script type="text/javascript">
function checkRadio() {
var y=document.getElementById('draftrequirement_2').value;
document.getElementById('draftrequirement_2_message').innerHTML = y;
}
</script>
</head>
<body>
<input onchange="checkRadio()" type="radio" name="draftrequirement" value="na" id="draftrequirement_2" />
<div id="draftrequirement_2_message" />
</body>
</html>
<html>
<head>
<script type="text/javascript">
function checkRadio() {
var y=document.getElementById('draftrequirement_2').value;
document.write(y);
return y;
}
</script>
</head>
<body>
<input onchange="checkRadio()" type="radio" name="draftrequirement" value="na" id="draftrequirement_2" />NA
</body>
</html>
Use this it is working