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!
Related
I'm brand new to JavaScript. I want to know if it's possible to search an HTML page for an element with a known class.
If this is possible how do i do this?
I've got this code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var x = document.getElementsByClassName("top_prodname");
</script>
</body>
</html>
Not sure what you mean about the URL. You can use document.querySelector() to find DOM elements. Here's an example:
var x = document.querySelector(".top_prodname");
console.log(x);
<span class="top_prodname">example</span>
As #0stone0 commented, you can learn more about querySelector here.
Using getElementsByClassName() should work fine, too. You can't create more specific selectors with getElementsByClassName() like you can with querySelector(). Although, if getting element references by class name is really all you need, this is fine. Note that it returns an array of element references.
var x = document.getElementsByClassName("top_prodname");
console.log(x[0]);
<span class="top_prodname">example</span>
I'm trying to learn JQuery, but not doing well. Currently, I'm trying to learn how to use .append to have Ajax functionality which allows one to view new dynamic content without reloading. When I try the following, however, nothing occurs.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>JQuery Test</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="content"/>
<script type="text/javascript">
function callback() {
$("#content").append($("qwerty"));
};
$(document).ready(function() {
//window.setTimeout(callback, 100);
callback();
});
</script>
</body>
</html>
To the best of my knowledge, this should make "qwerty" appear as if I has simply done <div id="content">qwerty</div>, but instead I get a blank page. If I replace the .append call with alert("qwerty"), it is properly displayed. What am I doing wrong?
You are trying to find an element with tagname qwerty in the dom like <qwerty>sometext</qwerty> and append it to #content.
To append the string qwerty to #content use
$("#content").append("qwerty");
Demo: Fiddle
$("#content").append("qwerty").
Just remove $ simple in your coding.. if you want to append text, you can directly pass the text in double quotation
Let's say we have this markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>project.js</title>
<script src="project.js"></script>
<script>
</script>
</head>
<body>
<h1>some project — javascript & html tests</h1>
<hr />
<p>
testing 123
</p>
</body>
</html>
I know that there are .prependChild(), .appendChild(), .innerHTML, etc, properties and methods, but what I am looking for is how to add (append) contents after the </body> tag closure?
I need this, without using jQuery — is it possible?
If you use 'id'.you can use these property:
document.getElementById('id').nextSibling;
document.getElementById('id').previousSibling;
It won't work in some browser because content after body is not "legal". Anyway, this would be:
document.body.parentNode.appendChild(document.createTextNode('text after body'));
document.body.parentNode.appendChild(document.createComment('comment after body'));
http://jsfiddle.net/yVKk6/ and inspect the Result frame.
I have the following two HTML Documents:
Main.html
<html lang="eng">
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
var ExamId = "001A";
function open_exam()
{
window.open("exam.html")
}
</script>
</head>
<body>
<input type=button value="Open Exam" onclick="open_exam()">
</body>
</html>
Exam.html
<html lang="eng">
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function setParentInfo()
{
window.parent.document.ExamID = '001B';
}
</script>
</head>
<body>
<p>Welcome to the Exam!</p>
<input type=button value="Set Parent Info" onclick="setParentInfo()">
</body>
</html>
Main.html brings up Exam.html via the input button. From inside Exam.html I would like to change the variable ExamID on the parent document (i.e.: Main.html). I'm trying to do this via the JavaScript function: setParentInfo().
The above code is not working. Can someone help me come up with the correct code?
Thanks So Much!
Variables are assigned on the window object, not the document object.
Since the value is already set, you can instead read the existing value to verify it:
alert(window.parent.ExamId); // == "001A"
Variable is declared and assigned in parent window so you get reference from your child window.
you can test using alert statement:
alert(window.parent.document.ExamId);
//output::001B
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jquery find closest previous sibling with class
The code given below is working perfectly
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
<script>$("p").prev(".selected").css("background", "yellow");</script>
</body>
</html>
But when i move .selected at the top(given below) then it is not working.Can anyone tell me how to make it to work for me and get the .selected element from .prev() method in the second case without manipulating html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p class="selected">Hello Again</p>//Moved to top
<div><span>Hello</span></div>
<p>And Again</p>
<script>$("p").prev(".selected").css("background", "yellow");</script>
</body>
</html>
You need to use .prevAll() instead of .prev(). The latter only checks the immediate predecessor which is div in your case. prevAll() however checks all prececessors so it will find your element. In case you have multiple predecessors matching your selector, use .prevAll('.selected').first() to get only the nearest one.
Demo: http://jsfiddle.net/ThiefMaster/GnEK5/
You can try
$('p').prevAll('.selected');