Object #<HTMLDocument> has no method 'getElementByName' - javascript

I copy some javascript example form jsfiddle and run them on local server but it shows the error on google chrome at inspect_element/console. Any suggestions for fixing this? Thanks.
error:
Uncaught TypeError: Object #<HTMLDocument> has no method 'getElementByName'
compute onclick
my code:
<!DOCTYPE html>
<html>
<head>
<title>My fruit</title>
<script type="text/javascript">
function checkFruit(){
var fruit_radio_pointers = document.getElementsByName("fruit");
var which_fruit = null;
for(var i=0; i<fruit_radio_pointers.length; i++){
if(fruit_radio_pointers[i].checked){
which_fruit = fruit_radio_pointers[i].value;
break;
}
}
alert(which_fruit);
}
document.getElementById("my_btn").addEventListener("click", checkFruit, false);
</script>
</head>
<body>
<p>
<button id="my_btn">Which Fruit?</button>
</p>
</body>
</html>

Names do not enforce uniqueness in html, so the function is getElementsByName (note the s after Element). When you change this, remember it will return an array, not one element.

Related

Is it possible to access a array that is outside an iframe?

The problem is this: inside my main page (parent.html) I have an iframe (child.html) and a script block. In that script block there is a array of integers and a function that adds elements to the list. In the iframe there is a new function that adds an element to the list of the main file (parent.html).
I would like to know if it is possible for the iframe (child.html) to access this function found in parent.html. Example:
parent.html
<html>
<head>
<title>Parent</title>
<script>
var parentList = [0];
var counter = 0;
function addValue(){
counter++;
parentList.push(counter);
console.log('parent', parentList);
}
</script>
</head>
<body>
<button onclick="addValue()">Add Value (Parent)</button>
<br />
<iframe src="child.html" allowfullscreen></iframe>
</body>
</html>
child.html
<html>
<head>
<title>Child</title>
</head>
<body>
<button onclick="addValueInternal()">Add Value Child</button>
<script>
var internalCount = 0;
function addValueInternal() {
internalCount++;
parentList.push(internalCount);
console.log('child', parentList);
}
</script>
</body>
</html>
The error:
child.html:12 Uncaught ReferenceError: parentList is not defined
at addValueInternal (child.html:12)
at HTMLButtonElement.onclick (child.html:6)
Yes. it is possible. Based on an example calling a function defined in the parent from an embedded iframe.
So in your case, you would have to reference the parent when accessing your array.
function addValueInternal() {
internalCount++;
parent.parentList.push(internalCount); // here we access the reference
console.log('child', parentList);
}
Be aware that you may encounter problems concerning the cross-origin policy afterwards.

insertAdjacentHTML can't read property of null

The following error keeps repeating... I just want explanation what is wrong here and some hint
error
script.js:20 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null
at renderHTML (script.js:20)
at XMLHttpRequest.ourRequest.onload (script.js:13)
javascript
var animalContainer=_('animal-info');
function _(id){
return document.getElementById(id);
}
_('btn').addEventListener("click",function(){
var ourRequest=new XMLHttpRequest();
ourRequest.open('GET','test.json');
ourRequest.onload=function(){
var ourData=JSON.parse(ourRequest.responseText);
renderHTML(ourData);
console.log(ourData[0]);
};
ourRequest.send();
});
function renderHTML(data){
animalContainer.insertAdjacentHTML('beforeend','testing 123');
}
index.php
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<button id ="btn">Submit</button>
<script type="text/javascript" src="script.js"></script>
<div id="animal-info"></div>
</body>
</html>
You need to declare the animalContainer variable inside the renderHTML() function, or pass it as an argument.

Error occurred in Chrome but not Firefox

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>a demo page</title>
</head>
<body>
<script>
var formatNum=function(num)
{
if(!/^(\+|-)?\d+(\.\d+)?$/.test(num)){
return num;
}
var re = new RegExp().compile("(\\d)(\\d{3})(,|\\.|$)");
num += "";
while(re.test(num))
num = num.replace(re, "$1,$2$3")
return num;
}
alert(formatNum(1000000));
</script>
</body>
</html>
i use these codes to fomat number look like this 1,000,000 it works well in firefox , but not work in chrome
here is the error shows in chrome Uncaught TypeError: Cannot call method 'test' of undefined
how can i resolve this error
The RegExp().compile() method is deprecated.
Why don't you use your regex like this -:
var regexp = new RegExp("(\\d)(\\d{3})(,|\\.|$)");
It's deprecated, and not working in firefox too. Maybe your version is an old one.
Deprecated and obsolete features
Use #Raoul's suggestion.
Try with this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>a demo page</title>
</head>
<body>
<script>
var formatNum=function(num)
{
if(!/^(\+|-)?\d+(\.\d+)?$/.test(num)){
return num;
}
var re = new RegExp();
re.compile("(\\d)(\\d{3})(,|\\.|$)");
num += "";
while(re.test(num))
num = num.replace(re, "$1,$2$3")
return num;
}
alert(formatNum(1000000));
</script>
</body>
</html>
Reason is chrome doesn't return a reference to the compiled RegExp object when calling compile().
So this line var re = new RegExp().compile("(\\d)(\\d{3})(,|\\.|$)"); will not work instead a less flexible version needs to be followed.
var re = new RegExp();
re.compile("(\\d)(\\d{3})(,|\\.|$)");

Undefined error in JavaScript

I'm getting data from XML. I can successfully pick up a price from the XML but there is a unexpected error called undefined that shows up when I use the function given below;
<html>
<head>
<script type="text/javascript">
function myXml(origin, destination) {
var x=xmlDoc.getElementsByTagName("flights");
for(i=0;i<x.length;i++) {
if(x[i].getAttribute('FrTLAs')==origin && x[i].getAttribute('destination')==destination) {
document.write(x[i].getAttribute('price'))
}
}
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(myXml('SYD','Bali'));
</script>
</body>
</html>
myXml('SYD','Bali') call returns undefined, as you do not return anything in function body. So
document.write(myXml('SYD','Bali'));
will print "undefined" . Just replace above code with this:
myXml('SYD','Bali');
Engineer is correct, or better return the value from your myXml function.
so, document.write(undefined) wont occur and you may not get the above error.

why change DOM property in anonymous function not working?

<html>
<head>
<title>test</title>
<script type="text/javascript">
function start(){
document.getElementById("first_div").onclick = function(){
document.getElementById("another_div").style.color = "red";
};
}
</script>
</head>
<body onload="start()">
<div id="first_div">first</div>
<div id="anoter_div">second</div>
</body>
</html>
when I click on the first_div, an error occurred:
TypeError: Result of expression 'document.getElementById("another_div")' [null] is not an object.
Any idea why this is not working?
thank you.
You've made a typo. Change:
document.getElementById("another_div")
^
To:
document.getElementById("anoter_div")
Or you could change the name of your div, which is probably better:
<div id="anoter_div">second</div>
<div id="another_div">second</div>
^
The method document.getElementById(..) isn't able to find the element and returns null, which explains the error you're getting.

Categories

Resources