So I am new to javascript, and I know how to access DOM elements using getElementByXxx() methods. But in one example I saw that it's possible to access elements directly using their name or like:
<!DOCTYPE html>
<html>
<body>
<form name="myForm"><input type="button" id="btn"></form>
<script>
console.log(document.myForm);
console.log(document.myForm.btn);
</script>
</body>
</html>
Console:
<form name="myForm">
<input type="button" id="btn">
</form>
<input type="button" id="btn">
Which is very confusing to me. Google and online courses only say about getElementById(), querySelector(), and objects (and object collections). I really don't understand how this works. When I change to id for form it doesn't work
<!DOCTYPE html>
<html>
<body>
<form id="myForm"><input type="button" id="btn"></form>
<script>
console.log(document.myForm);
console.log(document.myForm.btn);
</script>
</body>
</html>
Console:
undefined
Uncaught TypeError: Cannot read property 'btn' of undefined
Also it seems like it only work with form and input, and not for paragraph or div. Am I missing some obvious things here? I'm sorry if my question is too basic.
Related
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" id="TEXTBOX1_ID"></input>
<input type="button" id="button1" value="Add"onclick="add_element_to_array()"></input>
<input type="button" id="button2" value="Display" onclick="display_array()"</input>
<script src="js/app-functions.js"</script>
</body>
</html>
the above code contains two buttons and onclick they use a function from a js file. However once I press any of the bottoms it does nothing a piece of text is meant to appear, I don't think it is my js code as It very simple and I have made sure it's not a syntax error.
you missed to > in script.it didn't include file .
corrected:
<script src="js/app-functions.js"></script>
Happy New Year to all. Today, I encountered a very strange thing.
TypeError: document.body.getElementById is not a function
Several times I have checked all the characters, everything must be true
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
function addElem()
{
var number=document.body.getElementById("number");
}
</script>
<input type="text" id="number">
<br>
<button onclick="addElem()">Add</button>
</body>
</html>
Why do I get this error?
use document.getElementById() not document.body.getElementById() to achieve the desired effect
That's because document.body is an element. Elements do not have a getElementById() method since ids are unique and using it relative to specific element would be useless.
You cannot have a getElementById() method for the document.body element
Use document.getElementById() instead!
I was wondering what html tag that suppport id attribute either than <p> tag because i want to change the tag by javascript but i dont want it to be appear in paragraph.
This all what ive been trying
<!DOCTYPE html>
<html>
<body>
Name : <p id="user">user1</p>
<script>
document.getElementById("user").innerHTML="Arvin";
</script>
</body>
</html>
but the result is
Name :
Arvin
what I want is
Name : Arvin
thanks for spending your time to read this..any help will much appreciated
Every tag supports id. In your case, <span> would work well.
document.getElementById("user").innerHTML="Arvin";
Name : <span id="user">user1</span>
This code goes wrong because paragraph are shown into a new line (by browser).
This code put text in two lines (without your Javascript)
<html>
<body>
Name : <p id="user">user1</p>
</body>
</html>
You maybe shoud better do this:
<html>
<body>
<p>Name : <span id="user">user1</span></p>
</body>
</html>
document.getElementById("user").innerHTML="Arvin";
See running example here:
I cannot think of any tag that wouldn't support the id attribute, neither can the HTML5 spec:
3.2.5 Global attributes
The following attributes are common to and may be specified on all
HTML elements (even those not defined in this specification): ... id
...
Try adding display: inline style in <p> tag and your problem is solved. You can use id calling on any tag though.
<!DOCTYPE html>
<html>
<body>
Name : <p id="user" style="display:inline;">user1</p>
<script>
document.getElementById("user").innerHTML="Arvin";
</script>
</body>
</html>
<html>
<head>
<script>
function calledHere(value) { console.log(value); }
</script>
</head>
<body>
<form name="test">
<input type="button" value="click!" onclick="calledHere(test);" >
</form>
</body>
</html>
From the above code, in the onclick call passed wrongly the form name without quotes. But, the output displays the whole form DOM element. Don't know how it got the form element.
Any help will be more useful for my learning on javascript side.
Thanks in Advance!!!
You've already got the form element in your 'value' variable. The reason you're seeing the element's html logged is because console.log calls the .toString() method on the element.
This code demonstrates that 'value' references the form element:
<html>
<head>
<script>
function calledHere(value) { value.style.backgroundColor = "red" }
</script>
</head>
<body>
<form name="test">
<input type="button" value="click!" onclick="calledHere(test);" >
</form>
</body>
</html>
http://jsfiddle.net/John_C/KZ3KR/
This answer explains the scope of the variable; why you can pass the form name to the function: https://stackoverflow.com/a/1416157/1588990
I would like to dynamically modify the values of certain form elements, more specifically certain input text fields. So far, whenever I load my html page, I am just getting the blank input field, but I am expecting it to contain the value of 1. Here is an example of how I am trying to do this.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var myForm = $(this).getElementById('form1');
myForm.elements['Q01'].value = '1';
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
The reason this needs to be done dynamically is because the value of form could be different every time. Am I even approaching this correctly? Suggestions on how I can achieve my intended functionality?
-- EDIT --
None of the solutions seem to be doing the trick. Here is an update of my code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$("#Q01").val("1");
$("#form1 input[name='Q01']").val("1");
//$("input[name='Q01']").val('1');
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" id="Q01" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
I am expecting when I load the page, that the input text will have 1 in it. But the input text keeps showing up empty. Any ideas?
-- EDIT --
Here is a solution derived from the answers from below that I like:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Q01").val("1");
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" id="Q01" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
If you are using jQuery you could just change the id attribute to name in the input elements and then do something like this:
$('#Q01').val('1')
The val method sets the value sou can find more here: http://api.jquery.com/val/
You've got your ready handler correct. One of the great things about jQuery is its selector engine. I recommend taking a look at the documentation to help familiarize yourself with it.
To do what you want, I'd recommend something like this:
$(document).ready(function() {
$("#form1 input[name='Q01']").val("1");
});
The #form1 is the same as document.getElementById("form1"). The input[name='Q01'] grabs all input elements that have a name attribute equal to Q01. The .val method sets the selected elements value to the string 1.
$(document).ready(function(){
$("form input[name='Q01']).val('1');
)};
This should work:
$("input[name='Q01']").val('1');
But why not to set id's to your inputs?
Hope it works